|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
|
|
|
|
import StarRating from "../starRating/StarRating";
|
|
|
|
import ReactTooltip from "react-tooltip";
|
|
|
|
|
|
|
|
import watermelon from "../../assets/images/watermelon.png";
|
|
|
|
import video from "./danovin.mp4";
|
|
|
|
|
|
|
|
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";
|
|
|
|
|
|
|
|
const VodProduct = ({
|
|
|
|
productColor,
|
|
|
|
colors,
|
|
|
|
likeBtn,
|
|
|
|
discount,
|
|
|
|
discountPricePercent,
|
|
|
|
discountPrice,
|
|
|
|
productContent,
|
|
|
|
star,
|
|
|
|
productTags,
|
|
|
|
priceDirection,
|
|
|
|
productTitleAlignment,
|
|
|
|
priceHolder,
|
|
|
|
productCat,
|
|
|
|
rangeHolder,
|
|
|
|
priceTitle,
|
|
|
|
addToCartHolder,
|
|
|
|
productTitleCategoryHolder,
|
|
|
|
productTitleCategoryHolderAlignment,
|
|
|
|
priceStarHolder,
|
|
|
|
priceStarAlignment,
|
|
|
|
rangeWidth,
|
|
|
|
}) => {
|
|
|
|
const [progressFlag, setProgressFlag] = useState(false);
|
|
|
|
const [openModal, setOpenModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
setProgressFlag(true);
|
|
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
|
|
|
|
رویه باتن پلی / عکس کلیک کنید
|
|
|
|
{/* 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-1 sm:px-4">
|
|
|
|
<div
|
|
|
|
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
|
|
|
|
>
|
|
|
|
{/* product image */}
|
|
|
|
<div
|
|
|
|
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
|
|
|
|
style={{
|
|
|
|
backgroundImage: `url(${watermelon})`,
|
|
|
|
backgroundSize: "100% 100%",
|
|
|
|
backgroundRepeat: "no-repeat",
|
|
|
|
minHeight: "180px",
|
|
|
|
}}
|
|
|
|
data-modal-toggle="large-modal"
|
|
|
|
>
|
|
|
|
{/* icons on image */}
|
|
|
|
<div className="absolute left-2 top-2">
|
|
|
|
{discountPricePercent && (
|
|
|
|
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
|
|
|
|
<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 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
|
|
|
|
<img src={heart} alt="" className="w-5" />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{discount && (
|
|
|
|
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
|
|
|
|
<img src={discountImg} alt="" className="w-full" />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* play button */}
|
|
|
|
<div
|
|
|
|
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
|
|
|
|
onClick={() => setOpenModal(true)}
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
src={whitePlayIcon}
|
|
|
|
alt=""
|
|
|
|
className="w-5 h-5"
|
|
|
|
onClick={() => setOpenModal(true)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{/* select Color */}
|
|
|
|
{productColor && (
|
|
|
|
<div className="flex items-center absolute right-2 bottom-2">
|
|
|
|
{/* {colors.map((color,index))} */}
|
|
|
|
<img
|
|
|
|
src={YellowDotIcon}
|
|
|
|
alt=""
|
|
|
|
data-tip="زرد"
|
|
|
|
className="w-3 h-3 ml-1 cursor-pointer"
|
|
|
|
/>
|
|
|
|
<ReactTooltip place="top" type="dark" effect="float" />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* product content */}
|
|
|
|
<div className="px-2">
|
|
|
|
{/* content */}
|
|
|
|
<div className="mt-4 flex flex-col">
|
|
|
|
<div
|
|
|
|
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
|
|
|
|
>
|
|
|
|
<h2
|
|
|
|
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
|
|
|
|
>
|
|
|
|
نسخه چاپی علموم تجربه هفتم
|
|
|
|
</h2>
|
|
|
|
{productCat && (
|
|
|
|
<span
|
|
|
|
className={`text-xs font-light text-darkCrimsonTextColor`}
|
|
|
|
>
|
|
|
|
پایه سوم
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{productContent && (
|
|
|
|
<p
|
|
|
|
className={`text-justify text-sm leading-6 text-productContent`}
|
|
|
|
>
|
|
|
|
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
|
|
|
|
خوب دیگری نیز دارد.
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* price */}
|
|
|
|
<div
|
|
|
|
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`}
|
|
|
|
>
|
|
|
|
{priceHolder && (
|
|
|
|
<div
|
|
|
|
className={`flex items-center justify-between ${priceDirection}`}
|
|
|
|
>
|
|
|
|
{/* price */}
|
|
|
|
<div className="">
|
|
|
|
<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">
|
|
|
|
<span> قیمت</span> 140<span>تومان</span>
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<p
|
|
|
|
className={`text-sm font-semibold inline text-productPrice`}
|
|
|
|
>
|
|
|
|
111.000<span>تومان</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
{/* add to cart */}
|
|
|
|
{addToCartHolder && (
|
|
|
|
<button
|
|
|
|
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
|
|
|
|
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
اضافه کردن به سبد خرید
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{star && (
|
|
|
|
<div className="flex items-center">
|
|
|
|
<StarRating />
|
|
|
|
<span className="text-xs text-productContent font-bold mr-2">
|
|
|
|
39
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</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 rounded duration-500`}
|
|
|
|
style={{
|
|
|
|
width: progressFlag ? rangeWidth : 0,
|
|
|
|
}}
|
|
|
|
></div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
|
|
|
|
id="large-modal"
|
|
|
|
>
|
|
|
|
<div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
|
|
|
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
|
|
|
<div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
|
|
|
data-modal-toggle="large-modal"
|
|
|
|
>
|
|
|
|
<svg
|
|
|
|
class="w-5 h-5"
|
|
|
|
fill="currentColor"
|
|
|
|
viewBox="0 0 20 20"
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
>
|
|
|
|
<path
|
|
|
|
fill-rule="evenodd"
|
|
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
|
|
clip-rule="evenodd"
|
|
|
|
></path>
|
|
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="p-6 space-y-6">
|
|
|
|
<video
|
|
|
|
controls
|
|
|
|
className={`border transition-all duration-1000
|
|
|
|
`}
|
|
|
|
src={video}
|
|
|
|
type="video/mp4"
|
|
|
|
></video>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
// hover:-translate-y-2
|
|
|
|
export default VodProduct;
|
|
|
|
|
|
|
|
// 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
|
|
|
|
|
|
|
|
// bg color i used for play button icon:
|
|
|
|
// bg-playButtonIcon
|
|
|
|
// bg-playButtonIcon2
|
|
|
|
|
|
|
|
VodProduct.defaultProps = {
|
|
|
|
colors: [
|
|
|
|
{
|
|
|
|
icon: YellowDotIcon,
|
|
|
|
dataType: "زرد",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: RedDotIcon,
|
|
|
|
dataType: "قرمز",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: PurpleDotIcon,
|
|
|
|
dataType: "بنفش",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: LightBlueDotIcon,
|
|
|
|
dataType: "آبی",
|
|
|
|
},
|
|
|
|
|
|
|
|
LightBlueDotIcon,
|
|
|
|
],
|
|
|
|
|
|
|
|
// icons on product image
|
|
|
|
productColor: true,
|
|
|
|
likeBtn: true,
|
|
|
|
discount: true,
|
|
|
|
discountPricePercent: true,
|
|
|
|
// product price
|
|
|
|
discountPrice: true,
|
|
|
|
priceHolder: true,
|
|
|
|
priceTitle: false,
|
|
|
|
|
|
|
|
productContent: false,
|
|
|
|
star: true,
|
|
|
|
productTags: false,
|
|
|
|
productCat: true,
|
|
|
|
rangeHolder: true,
|
|
|
|
|
|
|
|
addToCartHolder: false,
|
|
|
|
|
|
|
|
productTitleAlignment: "text-justify",
|
|
|
|
|
|
|
|
// برای درصد دادن به عرض رنج
|
|
|
|
rangeWidth: "75%",
|
|
|
|
|
|
|
|
priceDirection: "flex-row",
|
|
|
|
|
|
|
|
productTitleCategoryHolder: "flex-row",
|
|
|
|
productTitleCategoryHolderAlignment: "items-center",
|
|
|
|
|
|
|
|
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
|
|
|
|
// یادمون باشه که حتما رویه
|
|
|
|
// flex-col-reverse
|
|
|
|
// بزاریم
|
|
|
|
|
|
|
|
// دیفالتش باید این باشه:
|
|
|
|
// priceStarHolder: flex-row
|
|
|
|
priceStarHolder: "flex-row",
|
|
|
|
// دیفالتش باید این باشه:
|
|
|
|
// priceStarHolder: items-center
|
|
|
|
priceStarAlignment: "items-center",
|
|
|
|
};
|