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, }) => { 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", };