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.
266 lines
8.9 KiB
266 lines
8.9 KiB
3 years ago
|
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,
|
||
|
|
productGrade,
|
||
|
|
productPrice,
|
||
|
|
productImg
|
||
|
|
}) => {
|
||
|
|
const [isHovering, setIsHovering] = useState(false);
|
||
|
|
return (
|
||
|
|
<div className="flex flex-wrap sm:flex-nowrap justify-around w-48">
|
||
|
|
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
|
||
|
|
<div
|
||
|
|
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
|
||
|
|
>
|
||
|
|
{/* 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-gray-200 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-sm ${productTitleColor} ${productTitleAlignment}`}
|
||
|
|
>
|
||
|
|
{productName}
|
||
|
|
</h2>
|
||
|
|
{productContent && (
|
||
|
|
<p
|
||
|
|
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
|
||
|
|
>
|
||
|
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
|
||
|
|
دیگری نیز دارد.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
{productCat && (
|
||
|
|
<span className={`text-xs font-light ${productCatTextColor}`}>
|
||
|
|
{productGrade}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{/* star */}
|
||
|
|
{star && (
|
||
|
|
<div className="flex items-center mt-2">
|
||
|
|
<StarRating />
|
||
|
|
<span className="text-xs text-productContent font-bold mr-2">
|
||
|
|
39
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{/* price */}
|
||
|
|
{priceHolder && (
|
||
|
|
<div
|
||
|
|
className={`flex items-center justify-between ${priceDirection}`}
|
||
|
|
>
|
||
|
|
<div className="mt-2">
|
||
|
|
<div
|
||
|
|
className={`${
|
||
|
|
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<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">
|
||
|
|
{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
|
||
|
|
};
|