parent
efb8e41e48
commit
bbd27322b8
17 changed files with 26 additions and 1542 deletions
Binary file not shown.
@ -1,323 +0,0 @@ |
|||||||
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); |
|
||||||
// const [closeModal, setCloseModal] = 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", |
|
||||||
}} |
|
||||||
onClick={() => setOpenModal(true)} |
|
||||||
> |
|
||||||
{/* 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-sansbold 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-sansbold 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 |
|
||||||
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
|
|
||||||
${openModal ? "opacity-80" : "opacity-10 pointer-events-none"} |
|
||||||
`}
|
|
||||||
onClick={() => setOpenModal(false)} |
|
||||||
> |
|
||||||
<video |
|
||||||
controls |
|
||||||
className={`border transition-all duration-1000
|
|
||||||
${openModal ? "opacity-100" : "opacity-0 pointer-events-none"} |
|
||||||
`}
|
|
||||||
src={video} |
|
||||||
type="video/mp4" |
|
||||||
onClick={(e) => e.stopPropagation()} |
|
||||||
></video> |
|
||||||
</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", |
|
||||||
}; |
|
||||||
Binary file not shown.
@ -1,344 +0,0 @@ |
|||||||
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 ( |
|
||||||
<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-sansbold 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-sansbold 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", |
|
||||||
}; |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
// import "./Testttt.scss";
|
|
||||||
|
|
||||||
import book from "./book.svg"; |
|
||||||
import bookCover from "./book-white-cover.svg"; |
|
||||||
|
|
||||||
export const Testttt = ({ bookBackCoverBg }) => { |
|
||||||
return ( |
|
||||||
<section className="my-20 "> |
|
||||||
<div style={{ width: "20%" }} className="mx-auto"> |
|
||||||
<div |
|
||||||
className="relative z-50 " |
|
||||||
style={{ |
|
||||||
backgroundImage: `url(${book})`, |
|
||||||
backgroundSize: "100% 100%", |
|
||||||
backgroundRepeat: "no-repeat", |
|
||||||
// minHeight: "300px",
|
|
||||||
height: "calc(100vh/2)", |
|
||||||
// maxHeight: "300px",
|
|
||||||
}} |
|
||||||
> |
|
||||||
{/* <img |
|
||||||
src={bookCover} |
|
||||||
alt="" |
|
||||||
className="h-full absolute left-0 top-1/2 transform -translate-y-1/2 translate-x-4 z-0" |
|
||||||
/> */} |
|
||||||
<div className="bg-green-400 w-4 rounded-tl-lg rounded-bl-lg h-full absolute left-0 top-1/2 transform -translate-y-1/2 translate-x-6 z-0"></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Testttt; |
|
||||||
Testttt.defaultProps = { |
|
||||||
bookBackCoverBg: "bg-greenBookBg", |
|
||||||
}; |
|
||||||
|
Before Width: | Height: | Size: 207 B |
|
Before Width: | Height: | Size: 62 KiB |
@ -1,5 +0,0 @@ |
|||||||
.playBtnImg { |
|
||||||
-webkit-transition: all 0.4s; |
|
||||||
transition: all 0.4s; |
|
||||||
} |
|
||||||
/*# sourceMappingURL=VodProductDesign.css.map */ |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
{ |
|
||||||
"version": 3, |
|
||||||
"mappings": "AAAA,AAAA,WAAW,CAAC;EACV,UAAU,EAAE,QAAQ;CACrB", |
|
||||||
"sources": [ |
|
||||||
"VodProductDesign.scss" |
|
||||||
], |
|
||||||
"names": [], |
|
||||||
"file": "VodProductDesign.css" |
|
||||||
} |
|
||||||
@ -1,334 +0,0 @@ |
|||||||
// it has style inside index.scss ---> // Start vodProductDesign && end vodProductDesign
|
|
||||||
|
|
||||||
import React, { useEffect, useState } from "react"; |
|
||||||
import { Link } from "react-router-dom"; |
|
||||||
|
|
||||||
import StarRating from "../starRating/StarRating"; |
|
||||||
import ReactTooltip from "react-tooltip"; |
|
||||||
|
|
||||||
import "./VodProductDesign.scss"; |
|
||||||
|
|
||||||
import book from "../../assets/images/goldon.png"; |
|
||||||
import watermelon from "../../assets/images/watermelon.png"; |
|
||||||
|
|
||||||
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"; |
|
||||||
import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg"; |
|
||||||
|
|
||||||
const VodProductDesign = ({ |
|
||||||
colors, |
|
||||||
likeBtn, |
|
||||||
discount, |
|
||||||
discountPricePercent, |
|
||||||
discountPrice, |
|
||||||
productContent, |
|
||||||
star, |
|
||||||
productTags, |
|
||||||
priceDirection, |
|
||||||
productTitleAlignment, |
|
||||||
priceHolder, |
|
||||||
productHolderBorder, |
|
||||||
productHolderBorderColor, |
|
||||||
productTitleColor, |
|
||||||
productExcerptTextColor, |
|
||||||
productCat, |
|
||||||
productCatTextColor, |
|
||||||
rangeHolder, |
|
||||||
priceTitle, |
|
||||||
productPriceAmountTitle, |
|
||||||
addToCartHolder, |
|
||||||
productTitleCategoryHolder, |
|
||||||
productTitleCategoryHolderAlignment, |
|
||||||
priceStarHolder, |
|
||||||
priceStarAlignment, |
|
||||||
rangeWidth, |
|
||||||
playBtnBgColor, |
|
||||||
mainPriceTitle, |
|
||||||
}) => { |
|
||||||
const [progressFlag, setProgressFlag] = useState(false); |
|
||||||
useEffect(() => { |
|
||||||
setTimeout(() => { |
|
||||||
setProgressFlag(true); |
|
||||||
}, 1000); |
|
||||||
}); |
|
||||||
return ( |
|
||||||
<section className="w-full sm:w-3/6 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8"> |
|
||||||
{/* title holder */} |
|
||||||
<div className="flex items-center justify-between mb-6"> |
|
||||||
<h2 className="text-lg text-productTitle">طراحی محصولات vod</h2> |
|
||||||
</div> |
|
||||||
<div className="mb-6"> |
|
||||||
<p className="leading-10"> |
|
||||||
آدرس: |
|
||||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
||||||
vodProductDesign |
|
||||||
</span> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
{/* 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 ${productHolderBorder} ${productHolderBorderColor}`} |
|
||||||
> |
|
||||||
{/* 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", |
|
||||||
}} |
|
||||||
> |
|
||||||
{/* 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-sansbold 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 ${playBtnBgColor}`} |
|
||||||
> |
|
||||||
<img src={whitePlayIcon} alt="" className=" w-5 h-5" /> |
|
||||||
</div> |
|
||||||
{/* select Color */} |
|
||||||
{colors && ( |
|
||||||
<div className="flex items-center absolute right-2 bottom-2"> |
|
||||||
<img |
|
||||||
src={YellowDotIcon} |
|
||||||
alt="" |
|
||||||
data-tip="زرد" |
|
||||||
className="w-3 h-3 ml-1 cursor-pointer" |
|
||||||
/> |
|
||||||
<ReactTooltip place="top" type="dark" effect="float" /> |
|
||||||
<img |
|
||||||
src={RedDotIcon} |
|
||||||
alt="" |
|
||||||
data-tip="قرمز" |
|
||||||
className="w-3 h-3 ml-1 cursor-pointer" |
|
||||||
/> |
|
||||||
<ReactTooltip place="top" type="dark" effect="float" /> |
|
||||||
<img |
|
||||||
src={PurpleDotIcon} |
|
||||||
alt="" |
|
||||||
data-tip="بنفش" |
|
||||||
className="w-3 h-3 ml-1 cursor-pointer" |
|
||||||
/> |
|
||||||
<ReactTooltip place="top" type="dark" effect="float" /> |
|
||||||
<img |
|
||||||
src={LightBlueDotIcon} |
|
||||||
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 ${productTitleColor} ${productTitleAlignment}`} |
|
||||||
> |
|
||||||
نسخه چاپی علموم تجربه هفتم |
|
||||||
</h2> |
|
||||||
{productCat && ( |
|
||||||
<span |
|
||||||
className={`text-xs font-light ${productCatTextColor}`} |
|
||||||
> |
|
||||||
پایه سوم |
|
||||||
</span> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
{productContent && ( |
|
||||||
<p |
|
||||||
className={`text-justify text-sm leading-6 ${productExcerptTextColor}`} |
|
||||||
> |
|
||||||
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های |
|
||||||
خوب دیگری نیز دارد. |
|
||||||
</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 ${productPriceAmountTitle}`} |
|
||||||
> |
|
||||||
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-sansbold 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> |
|
||||||
</section> |
|
||||||
); |
|
||||||
}; |
|
||||||
// hover:-translate-y-2
|
|
||||||
export default VodProductDesign; |
|
||||||
|
|
||||||
// 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
|
|
||||||
|
|
||||||
VodProductDesign.defaultProps = { |
|
||||||
// icons on product image
|
|
||||||
colors: 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, |
|
||||||
|
|
||||||
productTitleColor: "text-darkCrimsonTextColor", |
|
||||||
|
|
||||||
productExcerptTextColor: "text-productContent", |
|
||||||
|
|
||||||
productCatTextColor: "text-darkCrimsonTextColor", |
|
||||||
|
|
||||||
productPriceAmountTitle: "text-productPrice", |
|
||||||
productTitleAlignment: "text-justify", |
|
||||||
|
|
||||||
// برای درصد دادن به عرض رنج
|
|
||||||
rangeWidth: "75%", |
|
||||||
|
|
||||||
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
|
|
||||||
productHolderBorder: "border", |
|
||||||
productHolderBorderColor: "border-grayBorderColor", |
|
||||||
|
|
||||||
priceDirection: "flex-row", |
|
||||||
|
|
||||||
productTitleCategoryHolder: "flex-row", |
|
||||||
productTitleCategoryHolderAlignment: "items-center", |
|
||||||
|
|
||||||
playBtnBgColor: "bg-playButtonIcon", |
|
||||||
|
|
||||||
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
|
|
||||||
// یادمون باشه که حتما رویه
|
|
||||||
// flex-col-reverse
|
|
||||||
// بزاریم
|
|
||||||
|
|
||||||
// دیفالتش باید این باشه:
|
|
||||||
// priceStarHolder: flex-row
|
|
||||||
priceStarHolder: "flex-row", |
|
||||||
// دیفالتش باید این باشه:
|
|
||||||
// priceStarHolder: items-center
|
|
||||||
priceStarAlignment: "items-center", |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue