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.

254 lines
9.2 KiB

3 years ago
import React from "react";
import StarRating from "../starRating/StarRating";
3 years ago
import ReactTooltip from "react-tooltip";
3 years ago
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,
3 years ago
priceTitle,
productPriceAmountTitle,
addToCartHolder,
3 years ago
}) => {
return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
3 years ago
{/* title holder */}
<div className="flex items-center justify-between mb-6">
3 years ago
<h2 className="text-lg text-productTitle">طراحی محصولات vod</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
vodProductDesign
</span>
</p>
3 years ago
</div>
3 years ago
{/* 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
3 years ago
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
3 years ago
>
3 years ago
{/* img */}
3 years ago
<div
3 years ago
className="w-full relative flex items-center justify-center cursor-pointer"
3 years ago
style={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
minHeight: "180px",
}}
>
3 years ago
<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>
3 years ago
{/* 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">
3 years ago
<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" />
3 years ago
</div>
)}
</div>
<div className="px-2">
3 years ago
{/* content */}
<div className="mt-4 flex justify-between items-center">
3 years ago
<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>
3 years ago
{/* price */}
<div className="flex items-center justify-between mt-2">
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1
? "inline"
: "flex"
}`}
>
{priceTitle && (
<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 font-semibold inline ${productPriceAmountTitle}`}
>
145.000<span>تومان</span>
</p>
3 years ago
</div>
3 years ago
{/* add to cart */}
{addToCartHolder && (
<button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)}
3 years ago
</div>
3 years ago
)}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
</div>
3 years ago
{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 && (
3 years ago
<div className="bg-rangeBgColor h-3 w-full rounded mt-4">
3 years ago
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
</div>
)}
</div>
</div>
</div>
</div>
</section>
);
};
export default VodProductDesign;
3 years ago
// text colors i used:
// text-productPrice
3 years ago
VodProductDesign.defaultProps = {
3 years ago
colors: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
discountPrice: true,
3 years ago
productContent: false,
3 years ago
star: true,
3 years ago
productTags: false,
3 years ago
priceHolder: true,
priceTitle: false,
3 years ago
productCat: true,
rangeHolder: true,
3 years ago
addToCartHolder: false,
3 years ago
productTitleColor: "text-darkCrimsonTextColor",
3 years ago
productPriceAmountTitle: "text-productPrice",
productHolderBorder: "border",
3 years ago
productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify",
priceDirection: "flex-row",
};