|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import StarRating from "../starRating/StarRating";
|
|
|
|
|
|
|
|
import book from "../../assets/images/goldon.png";
|
|
|
|
import watermelon from "../../assets/images/watermelon.png";
|
|
|
|
|
|
|
|
import discountImg from "../../assets/icons/discount.png";
|
|
|
|
|
|
|
|
import heart from "../../assets/icons/vuesax-linear-heart.svg";
|
|
|
|
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
|
|
|
|
import RedDotIcon from "../../assets/icons/redDotIcon.svg";
|
|
|
|
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
|
|
|
|
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
|
|
|
|
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
|
|
|
|
import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg";
|
|
|
|
|
|
|
|
const VodProductDesign = ({
|
|
|
|
colors,
|
|
|
|
likeBtn,
|
|
|
|
discount,
|
|
|
|
discountPricePercent,
|
|
|
|
discountPrice,
|
|
|
|
productContent,
|
|
|
|
star,
|
|
|
|
productTags,
|
|
|
|
priceDirection,
|
|
|
|
productTitleAlignment,
|
|
|
|
priceHolder,
|
|
|
|
productHolderBorder,
|
|
|
|
productHolderBorderColor,
|
|
|
|
productTitleColor,
|
|
|
|
productCat,
|
|
|
|
rangeHolder,
|
|
|
|
verticalImg,
|
|
|
|
horizontalImg,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
|
|
|
|
{/* title holder */}
|
|
|
|
<div className="flex items-center justify-between mb-6">
|
|
|
|
<h2 className="text-lg text-productTitle">
|
|
|
|
inside vodProductDesign component
|
|
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
{/* product UI Design */}
|
|
|
|
<div className="flex flex-wrap sm:flex-nowrap justify-around">
|
|
|
|
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
|
|
|
|
<div
|
|
|
|
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className="w-full relative flex items-center justify-center cursor-pointer"
|
|
|
|
style={{
|
|
|
|
backgroundImage: `url(${watermelon})`,
|
|
|
|
backgroundSize: "100% 100%",
|
|
|
|
backgroundRepeat: "no-repeat",
|
|
|
|
minHeight: "180px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{/* play button */}
|
|
|
|
<div className="bg-playButtonIcon rounded-full p-4">
|
|
|
|
<img src={whitePlayIcon} alt="" className="w-5 h-5" />
|
|
|
|
</div>
|
|
|
|
{/* 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" />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div className="px-2">
|
|
|
|
<div className="mt-4">
|
|
|
|
<h2
|
|
|
|
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
|
|
|
|
>
|
|
|
|
نسخه چاپی علموم تجربه هفتم
|
|
|
|
</h2>
|
|
|
|
{productContent && (
|
|
|
|
<p className="text-justify text-productContent mt-2 text-xs leading-6">
|
|
|
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
|
|
|
|
خوب دیگری نیز دارد.
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
{productCat && (
|
|
|
|
<span className="text-darkCrimsonTextColor text-xs font-light">
|
|
|
|
پایه سوم
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{star && (
|
|
|
|
<div className="flex items-center mt-2">
|
|
|
|
<StarRating />
|
|
|
|
<span className="text-xs text-productContent font-bold mr-2">
|
|
|
|
39
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{priceHolder && (
|
|
|
|
<div
|
|
|
|
className={`flex items-center justify-between ${priceDirection}`}
|
|
|
|
>
|
|
|
|
{/* price */}
|
|
|
|
<div className="mt-2">
|
|
|
|
<div
|
|
|
|
className={`${
|
|
|
|
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
<span className="text-xs text-borderColor ml-2">
|
|
|
|
قیمت
|
|
|
|
</span>
|
|
|
|
{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">
|
|
|
|
145.000<span>تومان</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
{/* add to cart */}
|
|
|
|
<button
|
|
|
|
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
|
|
|
|
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
اضافه کردن به سبد خرید
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{productTags && (
|
|
|
|
<div className="mt-2 flex flex-wrap">
|
|
|
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
|
|
|
|
ارسال رایگان
|
|
|
|
</button>
|
|
|
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
|
|
|
|
برچسب های دیگر
|
|
|
|
</button>
|
|
|
|
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
|
|
|
|
دسته بندی به صورت کادو
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{rangeHolder && (
|
|
|
|
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
|
|
|
|
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default VodProductDesign;
|
|
|
|
|
|
|
|
VodProductDesign.defaultProps = {
|
|
|
|
colors: false,
|
|
|
|
likeBtn: false,
|
|
|
|
discount: false,
|
|
|
|
discountPricePercent: false,
|
|
|
|
discountPrice: false,
|
|
|
|
productContent: false,
|
|
|
|
star: false,
|
|
|
|
productTags: false,
|
|
|
|
priceHolder: false,
|
|
|
|
productCat: true,
|
|
|
|
rangeHolder: true,
|
|
|
|
verticalImg: false,
|
|
|
|
horizontalImg: true,
|
|
|
|
productTitleColor: "text-darkCrimsonTextColor",
|
|
|
|
productHolderBorder: "border-0",
|
|
|
|
productHolderBorderColor: "border-grayBorderColor",
|
|
|
|
productTitleAlignment: "text-justify",
|
|
|
|
|
|
|
|
priceDirection: "flex-row",
|
|
|
|
};
|