You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
268 lines
9.1 KiB
268 lines
9.1 KiB
import React, { useState } from "react"; |
|
|
|
import StarRating from "../StarRating"; |
|
// import Tag from "../Tag"; |
|
// import ReactTooltip from "react-tooltip"; |
|
|
|
import book from "./goldon.png"; |
|
import watermelon from "./watermelon.png"; |
|
import heart from "./vuesax-linear-heart.svg"; |
|
import discountImg from "./discount.png"; |
|
import YellowDotIcon from "./yellowDotIcon.svg"; |
|
import RedDotIcon from "./redDotIcon.svg"; |
|
import PurpleDotIcon from "./purpleDotIcon.svg"; |
|
import LightBlueDotIcon from "./lightBlueDotIcon.svg"; |
|
|
|
const ProductDesign = ({ |
|
colors, |
|
likeBtn, |
|
discount, |
|
discountPricePercent, |
|
discountPrice, |
|
productContent, |
|
star, |
|
productTags, |
|
priceDirection, |
|
productTitleAlignment, |
|
priceHolder, |
|
productHolderBorder, |
|
productHolderBorderColor, |
|
productTitleColor, |
|
productExcerptTextColor, |
|
productCat, |
|
productCatTextColor, |
|
rangeHolder, |
|
verticalImg, |
|
horizontalImg, |
|
rangeWidth, |
|
addToCartHolder, |
|
productName, |
|
productPrice, |
|
productImg, |
|
writeGHEIMAT, |
|
numberOfRegards, |
|
productHolderHoverBorder |
|
}) => { |
|
const [isHovering, setIsHovering] = useState(false); |
|
return ( |
|
<div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3"> |
|
<div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4"> |
|
<div |
|
className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} hover:${productHolderHoverBorder}`} |
|
> |
|
{/* product image */} |
|
<div className="w-full relative"> |
|
{/* icons on image */} |
|
<div className="absolute left-2 top-2"> |
|
{discountPricePercent && ( |
|
<div className="bg-discountPriceBg rounded-md px-2"> |
|
<p className="text-discountPriceTitle font-bold text-xs"> |
|
23<span>%</span> |
|
</p> |
|
</div> |
|
)} |
|
{likeBtn && ( |
|
<div className="bg-likeBtnBg rounded-md flex justify-center my-2"> |
|
<img src={heart} alt="" className="w-5" /> |
|
</div> |
|
)} |
|
{discount && ( |
|
<div className="rounded-md"> |
|
<img src={discountImg} alt="" className="w-full" /> |
|
</div> |
|
)} |
|
</div> |
|
{/* img */} |
|
<div className="w-full h-48 flex bg-grayF4 p-0 justify-center rounded-lg"> |
|
{verticalImg && ( |
|
<img |
|
src={productImg} |
|
alt="" |
|
className="h-full rounded-lg cursor-pointer py-8" |
|
onMouseEnter={() => setIsHovering(true)} |
|
onMouseLeave={() => setIsHovering(false)} |
|
/> |
|
)} |
|
{horizontalImg && ( |
|
<img src={watermelon} alt="" className="w-full rounded-lg" /> |
|
)} |
|
</div> |
|
{/* select Color */} |
|
{/* {colors && ( |
|
<div className="flex items-center absolute right-2 bottom-2"> |
|
<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 |
|
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"> |
|
<div className="mt-4"> |
|
<h2 |
|
className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`} |
|
> |
|
{productName} |
|
</h2> |
|
{productContent && ( |
|
<p |
|
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`} |
|
> |
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب |
|
دیگری نیز دارد. |
|
</p> |
|
)} |
|
{productCat && ( |
|
<span className={`text-sm font-light ${productCatTextColor}`}> |
|
{productCat} |
|
</span> |
|
)} |
|
</div> |
|
{/* star */} |
|
{star && ( |
|
<div className="flex items-center mt-2"> |
|
<StarRating /> |
|
<span className="text-sm-1 text-productContent font-bold mr-2"> |
|
بر اساس {numberOfRegards} بررسی |
|
</span> |
|
</div> |
|
)} |
|
{/* price */} |
|
{priceHolder && ( |
|
<div |
|
className={`flex items-center justify-between ${priceDirection}`} |
|
> |
|
<div className="mt-2"> |
|
<div |
|
className={`${ |
|
priceDirection.indexOf("col") !== -1 ? "inline" : "flex" |
|
}`} |
|
> |
|
{writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>} |
|
{/* price with line on it */} |
|
{discountPrice && ( |
|
<p className="line-through text-xs text-borderColor mr-2"> |
|
145<span>تومان</span> |
|
</p> |
|
)} |
|
</div> |
|
<p className="text-sm text-productPrice font-semibold inline text-blue5F"> |
|
{productPrice} <span>تومان</span> |
|
</p> |
|
</div> |
|
{/* add to cart */} |
|
{addToCartHolder && ( |
|
<button |
|
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${ |
|
priceDirection.indexOf("col") !== -1 ? "w-full" : "" |
|
}`} |
|
> |
|
اضافه کردن به سبد خرید |
|
</button> |
|
)} |
|
</div> |
|
)} |
|
{/* {productTags && ( |
|
<div className="mt-2 flex flex-wrap"> |
|
{ |
|
productTags.map((item, index) => <Tag title={item} key={index} />) |
|
} |
|
</div> |
|
)} */} |
|
{rangeHolder && ( |
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> |
|
<div |
|
className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`} |
|
></div> |
|
</div> |
|
)} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
}; |
|
|
|
export default ProductDesign; |
|
|
|
// text colors i used for product title: |
|
// text-darkCrimsonTextColor |
|
// text-productTitle |
|
|
|
// text color i used for product excerpt: |
|
// text-productContent |
|
|
|
// text color i used for product cat: |
|
// text-darkCrimsonTextColor |
|
|
|
ProductDesign.defaultProps = { |
|
// icons on product image |
|
colors: false, |
|
likeBtn: false, |
|
discount: false, |
|
discountPricePercent: false, |
|
// product price |
|
discountPrice: false, |
|
priceHolder: true, |
|
|
|
productContent: false, |
|
star: true, |
|
productTags: [], |
|
productCat: true, |
|
rangeHolder: true, |
|
|
|
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع |
|
verticalImg: true, |
|
horizontalImg: false, |
|
|
|
addToCartHolder: false, |
|
|
|
productTitleColor: "text-productTitle", |
|
|
|
productExcerptTextColor: "text-productContent", |
|
|
|
productCatTextColor: "text-darkCrimsonTextColor", |
|
// برای درصد دادن به عرض رنج |
|
rangeWidth: "w-44", |
|
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم |
|
productHolderBorder: "border", |
|
productHolderBorderColor: "border-grayBorderColor", |
|
|
|
productTitleAlignment: "text-justify", |
|
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم |
|
priceDirection: "flex-row", |
|
productImg: book, |
|
writeGHEIMAT: false |
|
};
|
|
|