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 (
{/* 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 */}

نسخه چاپی علموم تجربه هفتم

{productCat && ( پایه سوم )}
{productContent && (

این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب دیگری نیز دارد.

)}
{/* price */}
{priceHolder && (
{/* price */}
{priceTitle && ( قیمت )} {discountPrice && (

قیمت 140تومان

)}

111.000تومان

{/* 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", };