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.
257 lines
8.7 KiB
257 lines
8.7 KiB
import React, { useEffect, useState } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import separate from "../../utils/separate"; |
|
import StarRating from "../StarRating"; |
|
import ReactTooltip from "react-tooltip"; |
|
|
|
//assets |
|
import videoImage1 from "./videoImages/image-1.svg"; |
|
import videoImage2 from "./videoImages/image-2.svg"; |
|
import videoImage3 from "./videoImages/image-3.svg"; |
|
import videoImage4 from "./videoImages/image-4.svg"; |
|
import videoImage5 from "./videoImages/image-5.svg"; |
|
import videoImage6 from "./videoImages/image-6.svg"; |
|
|
|
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"; |
|
import { book } from "../../redux/actions"; |
|
|
|
const videoImages = [ |
|
videoImage1, |
|
videoImage2, |
|
videoImage3, |
|
videoImage4, |
|
videoImage5, |
|
videoImage6, |
|
]; |
|
|
|
const VodProduct = ({ |
|
video, |
|
index, |
|
productColor, |
|
likeBtn, |
|
discountPricePercent, |
|
discountPrice, |
|
productContent, |
|
star, |
|
productTags, |
|
priceDirection, |
|
priceHolder, |
|
rangeHolder, |
|
priceTitle, |
|
addToCartHolder, |
|
priceStarHolder, |
|
priceStarAlignment, |
|
rangeWidth, |
|
price, |
|
height, |
|
grades, |
|
// minHeight, |
|
}) => { |
|
const [progressFlag, setProgressFlag] = useState(false); |
|
useEffect(() => { |
|
setTimeout(() => { |
|
setProgressFlag(true); |
|
}, 1000); |
|
}); |
|
return ( |
|
<> |
|
<Link |
|
to={"/videos/" + video?.id} |
|
className="flex flex-wrap sm:flex-nowrap justify-around" |
|
style={{ direction: "rtl" }} |
|
draggable={false} |
|
> |
|
<div className="w-full flex flex-wrap items-center justify-around my-3 px-1 sm:px-4"> |
|
<div |
|
className={`w-full mx-1 sm:w-60 md:w-96 rounded-lg shadow-sm p-2 my-3 border border-gray-200 border-solid hover:border-greenB9 hover:border-2 transform hover:-translate-y-5 transition-all duration-500`} |
|
> |
|
<div |
|
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer" |
|
style={{ |
|
backgroundImage: `url(https://dnvn.ir/api/v1/file/${video?.fileIds})`, |
|
backgroundSize: "100% 100%", |
|
backgroundRepeat: "no-repeat", |
|
height: height, |
|
}} |
|
data-modal-toggle="large-modal" |
|
> |
|
<div className="absolute left-2 top-1"> |
|
{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 bg-white bg-opacity-70"> |
|
<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 bg-white bg-opacity-70"> |
|
<img src={heart} alt="" className="w-5" /> |
|
</div> |
|
)} |
|
</div> |
|
<div |
|
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon bg-black bg-opacity-20 backdrop-filter backdrop-blur-md`} |
|
> |
|
<img src={whitePlayIcon} alt="" className="w-5 h-5" /> |
|
</div> |
|
{productColor && ( |
|
<div className="flex items-center absolute right-2 bottom-3"> |
|
<img |
|
src={YellowDotIcon} |
|
alt="" |
|
data-tip="زرد" |
|
className="w-3 h-3 ml-1 cursor-pointer" |
|
/> |
|
<ReactTooltip place="top" type="dark" effect="float" /> |
|
</div> |
|
)} |
|
</div> |
|
<div className="px-2"> |
|
<div className="mt-4 flex flex-col"> |
|
<div className={`flex justify-between `}> |
|
<h2 className={`leading-4 font-semibold text-base mb-4`}> |
|
{"دوره ویدیویی" + " " + video?.name} |
|
</h2> |
|
<span className={`text-tiny font-light text-green7B`}> |
|
{"پایه" + " " + grades[video?.gradeId]} |
|
</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}`} |
|
> |
|
<div className=""> |
|
<div |
|
className={`${ |
|
priceDirection.indexOf("col") !== -1 |
|
? "inline" |
|
: "flex" |
|
}`} |
|
> |
|
<span className="text-xs text-borderColor ml-2"></span> |
|
</div> |
|
<p |
|
className={`text-lg text-productPrice font-semibold inline text-blue5F`} |
|
> |
|
{separate(video?.product[2]?.price) + " "} |
|
<span>تومان</span> |
|
</p> |
|
</div> |
|
{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> |
|
)} |
|
</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> |
|
</Link> |
|
</> |
|
); |
|
}; |
|
export default VodProduct; |
|
|
|
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", |
|
priceStarHolder: "flex-row", |
|
priceStarAlignment: "items-center", |
|
poster: watermelon, |
|
};
|
|
|