master
mahdi 3 years ago
parent 1a8870367c
commit fee18caabf
  1. 6
      src/App.js
  2. 19
      src/components/productDesign/ProductDesign.js
  3. 27
      src/components/testtttt/Testttt.js
  4. 1
      tailwind.config.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 (
<div className="App">
{/* <ProductDesign /> */}
<ProductDesign />
{/* <VodProductDesign /> */}
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
@ -31,8 +32,9 @@ function App() {
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <HeaderDesign1 /> */}
<ContactInfoSection />
{/* <ContactInfoSection /> */}
{/* <FooterDesign1 /> */}
<Testttt />
</div>
);
}

@ -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 (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
@ -112,7 +114,13 @@ const ProductDesign = ({
{/* img */}
<div className="flex-shrink-0">
{verticalImg && (
<img src={book} alt="" className="w-full rounded-lg" />
<img
src={book}
alt=""
className="w-full rounded-lg cursor-pointer"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/>
)}
{horizontalImg && (
<img src={watermelon} alt="" className="w-full rounded-lg" />
@ -151,6 +159,13 @@ const ProductDesign = ({
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)}
<div
className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${
isHovering ? "" : "hidden"
}`}
>
<button>افزودن به سبد خرید</button>
</div>
</div>
{/* product content */}
<div className="px-2">

@ -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 (
<div className="p-20 relative">
<button
className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer ${
isHovering ? "" : "hidden"
}`}
>
hover to see me
</button>
<img
src={blogImage}
alt=""
className="w-96"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/>
</div>
);
};
export default Testttt;

@ -38,6 +38,7 @@ module.exports = {
discountPriceBg: "#F0FFF1",
counterBg: "#66B1EB",
incrementDecrementBg: "#2E7AB5",
blueBgColor: "#196EC0",
darkGreenBg: "#038A99",
lightGrayBgColor: "#818181",
midGrayBgColor: "#DBDBDB",

Loading…
Cancel
Save