|
|
|
|
@ -1,3 +1,4 @@ |
|
|
|
|
import React, { useEffect, useState } from "react"; |
|
|
|
|
import "./ProductDesign.scss"; |
|
|
|
|
|
|
|
|
|
import StarRating from "../starRating/StarRating"; |
|
|
|
|
@ -39,6 +40,13 @@ const ProductDesign = ({ |
|
|
|
|
rangeWidth, |
|
|
|
|
addToCartHolder, |
|
|
|
|
}) => { |
|
|
|
|
const [progressFlag, setProgressFlag] = useState(false); |
|
|
|
|
useEffect(() => { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
setProgressFlag(true); |
|
|
|
|
}, 500); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
|
|
|
|
{/* title holder */} |
|
|
|
|
@ -90,19 +98,19 @@ const ProductDesign = ({ |
|
|
|
|
{/* icons on image */} |
|
|
|
|
<div className="absolute left-2 top-2"> |
|
|
|
|
{discountPricePercent && ( |
|
|
|
|
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2"> |
|
|
|
|
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 cursor-pointer"> |
|
|
|
|
<p className="text-discountPriceTitle font-bold text-xs"> |
|
|
|
|
23<span>%</span> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{likeBtn && ( |
|
|
|
|
<div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2"> |
|
|
|
|
<div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce"> |
|
|
|
|
<img src={heart} alt="" className="w-5" /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{discount && ( |
|
|
|
|
<div className="rounded-md mt-2"> |
|
|
|
|
<div className="rounded-md mt-2 cursor-pointer hover:animate-pulse"> |
|
|
|
|
<img src={discountImg} alt="" className="w-full" /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
@ -241,7 +249,10 @@ const ProductDesign = ({ |
|
|
|
|
{rangeHolder && ( |
|
|
|
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
|
|
|
|
<div |
|
|
|
|
className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`} |
|
|
|
|
className={`bg-rangeFillBgColor h-3 rounded duration-300`} |
|
|
|
|
style={{ |
|
|
|
|
width: progressFlag ? rangeWidth : 0, |
|
|
|
|
}} |
|
|
|
|
></div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
@ -293,7 +304,7 @@ ProductDesign.defaultProps = { |
|
|
|
|
|
|
|
|
|
productCatTextColor: "text-darkCrimsonTextColor", |
|
|
|
|
// برای درصد دادن به عرض رنج
|
|
|
|
|
rangeWidth: "w-44", |
|
|
|
|
rangeWidth: "60%", |
|
|
|
|
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
|
|
|
|
|
productHolderBorder: "border", |
|
|
|
|
productHolderBorderColor: "border-grayBorderColor", |
|
|
|
|
|
