master
mahdi 3 years ago
parent 1918dfb64a
commit 032d68a4b6
  1. 2
      src/App.js
  2. 2
      src/components/productDesign/ProductDesign.js
  3. 66
      src/components/vodProductDesign/VodProductDesign.js

@ -17,7 +17,7 @@ function App() {
return (
<div className="App">
<ProductDesign />
{/* <VodProductDesign /> */}
<VodProductDesign />
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}

@ -101,7 +101,7 @@ const ProductDesign = ({
</div>
)}
{discount && (
<div className="absolute rounded-md mt-2">
<div className="rounded-md mt-2">
<img src={discountImg} alt="" className="w-full" />
</div>
)}

@ -1,6 +1,7 @@
import React from "react";
import StarRating from "../starRating/StarRating";
import ReactTooltip from "react-tooltip";
import book from "../../assets/images/goldon.png";
import watermelon from "../../assets/images/watermelon.png";
@ -35,8 +36,6 @@ const VodProductDesign = ({
priceTitle,
productPriceAmountTitle,
addToCartHolder,
verticalImg,
horizontalImg,
}) => {
return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -68,6 +67,25 @@ const VodProductDesign = ({
minHeight: "180px",
}}
>
<div className="absolute left-2 top-2">
{discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
<p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2">
<img src={heart} alt="" className="w-5" />
</div>
)}
{discount && (
<div className="rounded-md mt-2">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
</div>
{/* play button */}
<div className="bg-playButtonIcon rounded-full p-4">
<img src={whitePlayIcon} alt="" className="w-5 h-5" />
@ -75,10 +93,34 @@ const VodProductDesign = ({
{/* select Color */}
{colors && (
<div className="flex items-center absolute right-2 bottom-2">
<img src={YellowDotIcon} alt="" className="w-3 h-3" />
<img src={RedDotIcon} alt="" className="w-3 h-3" />
<img src={PurpleDotIcon} alt="" className="w-3 h-3" />
<img src={LightBlueDotIcon} alt="" className="w-3 h-3" />
<img
src={YellowDotIcon}
alt=""
data-tip="زرد"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={RedDotIcon}
alt=""
data-tip="قرمز"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={PurpleDotIcon}
alt=""
data-tip="بنفش"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={LightBlueDotIcon}
alt=""
data-tip="آبی"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)}
</div>
@ -187,11 +229,11 @@ export default VodProductDesign;
// text-productPrice
VodProductDesign.defaultProps = {
colors: false,
likeBtn: false,
discount: false,
discountPricePercent: false,
discountPrice: false,
colors: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
discountPrice: true,
productContent: false,
star: true,
productTags: false,
@ -199,8 +241,6 @@ VodProductDesign.defaultProps = {
priceTitle: false,
productCat: true,
rangeHolder: true,
verticalImg: false,
horizontalImg: true,
addToCartHolder: false,
productTitleColor: "text-darkCrimsonTextColor",

Loading…
Cancel
Save