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

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&nbsp;<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,
};