import React, { useEffect, useState } from "react";
import StarRating from "../StarRating";
import ReactTooltip from "react-tooltip";
import watermelon from "./watermelon.png";
import video from "./danovin.mp4";
import discountImg from "./discount.png";
import heart from "./vuesax-linear-heart.svg";
import YellowDotIcon from "./yellowDotIcon.svg";
import RedDotIcon from "./redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg";
import whitePlayIcon from "./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,
productTitle,
poster,
price
}) => {
const [progressFlag, setProgressFlag] = useState(false);
// const [openModal, setOpenModal] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 1000);
});
return (
<>
{/* product UI Design */}
{/* product image */}
{/* icons on image */}
{discountPricePercent && (
23%
)}
{likeBtn && (
)}
{discount && (
)}
{/* play button */}
setOpenModal(true)}
>
setOpenModal(true)}
/>
{/* select Color */}
{productColor && (
{/* {colors.map((color,index))} */}
)}
{/* product content */}
{/* content */}
{productTitle}
{productCat && (
{productCat}
)}
{productContent && (
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
)}
{/* price */}
{priceHolder && (
{/* price */}
{priceTitle && (
قیمت
)}
{discountPrice && (
قیمت 140تومان
)}
{price}تومان
{/* add to cart */}
{addToCartHolder && (
)}
)}
{star && (
39
)}
{productTags && (
)}
{rangeHolder && (
)}
>
);
};
// 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",
poster: watermelon
};