From fee18caabfa99e3619ce00317b2eb8a78e965300 Mon Sep 17 00:00:00 2001 From: mahdi Date: Tue, 4 Jan 2022 17:47:21 +0330 Subject: [PATCH] update --- src/App.js | 6 +++-- src/components/productDesign/ProductDesign.js | 19 +++++++++++-- src/components/testtttt/Testttt.js | 27 +++++++++++++++++++ tailwind.config.js | 1 + 4 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 src/components/testtttt/Testttt.js diff --git a/src/App.js b/src/App.js index fa7173e..b97e4df 100644 --- a/src/App.js +++ b/src/App.js @@ -14,11 +14,12 @@ import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1"; import VodProductDesign from "./components/vodProductDesign/VodProductDesign"; import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection"; import FooterDesign1 from "./components/footer/design1/FooterDesign1"; +import Testttt from "./components/testtttt/Testttt"; function App() { return (
- {/* */} + {/* */} {/* */} {/* */} @@ -31,8 +32,9 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/* */} +
); } diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js index 73381ae..f998f88 100644 --- a/src/components/productDesign/ProductDesign.js +++ b/src/components/productDesign/ProductDesign.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import "./ProductDesign.scss"; @@ -41,6 +41,8 @@ const ProductDesign = ({ rangeWidth, addToCartHolder, }) => { + const [isHovering, setIsHovering] = useState(false); + return (
{/* title holder */} @@ -112,7 +114,13 @@ const ProductDesign = ({ {/* img */}
{verticalImg && ( - + setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + /> )} {horizontalImg && ( @@ -151,6 +159,13 @@ const ProductDesign = ({
)} +
+ +
{/* product content */}
diff --git a/src/components/testtttt/Testttt.js b/src/components/testtttt/Testttt.js new file mode 100644 index 0000000..ce98b06 --- /dev/null +++ b/src/components/testtttt/Testttt.js @@ -0,0 +1,27 @@ +import React, { useState } from "react"; +import blogImage from "../../assets/images/blog-featured-image.jpg"; + +const Testttt = () => { + const [isHovering, setIsHovering] = useState(false); + + return ( +
+ + setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + /> +
+ ); +}; + +export default Testttt; diff --git a/tailwind.config.js b/tailwind.config.js index 06c22fc..9aa4a2e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -38,6 +38,7 @@ module.exports = { discountPriceBg: "#F0FFF1", counterBg: "#66B1EB", incrementDecrementBg: "#2E7AB5", + blueBgColor: "#196EC0", darkGreenBg: "#038A99", lightGrayBgColor: "#818181", midGrayBgColor: "#DBDBDB",