parent
fd5cb477e3
commit
51ff63a5aa
9 changed files with 1032 additions and 116 deletions
Binary file not shown.
@ -0,0 +1,343 @@ |
||||
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-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", |
||||
}; |
||||
@ -1,115 +1,58 @@ |
||||
//
|
||||
// import React, { useState } from "react";
|
||||
import React from "react"; |
||||
import video from "./danovin.mp4"; |
||||
|
||||
// import productImg from "./product-chair.svg";
|
||||
// import plus from "./plus.svg";
|
||||
const Testttt = () => { |
||||
return ( |
||||
<div className="App"> |
||||
<div class="block space-y-4 md:flex md:space-y-0 md:space-x-4"> |
||||
<button |
||||
class="block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" |
||||
type="button" |
||||
data-modal-toggle="large-modal" |
||||
> |
||||
Large modal |
||||
</button> |
||||
</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> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
// const ProductSuggestion = ({ suggestions, selected }) => {
|
||||
// const [selectedProduct, setSelectedProduct] = useState([]);
|
||||
// const addToSelected = (obj) => {
|
||||
// if (selectedProduct.indexOf(obj) === -1) {
|
||||
// setSelectedProduct(() => [...selectedProduct, obj]);
|
||||
// } else {
|
||||
// setSelectedProduct(() =>
|
||||
// selectedProduct.splice(selectedProduct.indexOf(obj), 1)
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
// return (
|
||||
// <section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
|
||||
// <h2 className="text-center text-lg font-bold text-productPrice">
|
||||
// این کالاها برای خرید به شما پیشنهام می دهیم
|
||||
// </h2>
|
||||
// {/* product design */}
|
||||
// <div className="flex flex-row flex-wrap justify-center items-center mt-20">
|
||||
// {suggestions.map((suggestion, index) => (
|
||||
// <div
|
||||
// className="flex flex-col sm:flex-row mb-7"
|
||||
// key={index}
|
||||
// onClick={() => setSelectedProduct(suggestion)}
|
||||
// >
|
||||
// <img src={suggestion.plusIcon} alt="" className="mx-4" />
|
||||
// <div
|
||||
// className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
|
||||
// ${selectedProduct === suggestion ? "bg-white" : ""}`}
|
||||
// >
|
||||
// <img
|
||||
// src={suggestion.productImage}
|
||||
// alt=""
|
||||
// className="w-full h-full"
|
||||
// />
|
||||
// <h2 className="my-3 text-sm text-productPrice">
|
||||
// {suggestion.productTitle}
|
||||
// </h2>
|
||||
// <p className="text-sm text-lightBlueTextColor">
|
||||
// {suggestion.productPrice}
|
||||
// <span className="mr-1 text-xs text-black">تومان</span>
|
||||
// </p>
|
||||
// <div className="flex flex-col items-center mt-3">
|
||||
// {suggestion.selected && (
|
||||
// <span className="text-xs">انتخاب شما</span>
|
||||
// )}
|
||||
// <input
|
||||
// checked={selectedProduct.indexOf(suggestion) > -1}
|
||||
// onClick={() => setSelectedProduct(suggestion)}
|
||||
// className="checkbox-input mt-4 cursor-pointer w-4 h-4"
|
||||
// type="checkbox"
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// {/* bottom */}
|
||||
// <div className="flex flex-col justify-center items-center mt-10">
|
||||
// <div className="flex flex-row mb-5">
|
||||
// <p className="text-sm sm:text-base text-productPrice font-bold">
|
||||
// جمع لوازم اختیاری خریداری شده
|
||||
// <span> 56/894/400 </span>
|
||||
// تومان
|
||||
// </p>
|
||||
// <span className="text-lightBlueTextColor text-sm sm:text-base mr-1 font-bold">
|
||||
// 1 کالا
|
||||
// </span>
|
||||
// </div>
|
||||
// <p className="text-xs sm:text-sm font-light mb-2 text-gray-600">
|
||||
// در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
|
||||
// </p>
|
||||
// <button className="my-2 text-white rounded bg-blueBgColor p-2 text-sm">
|
||||
// اضافه کردن 1 مورد به سبد خرید
|
||||
// </button>
|
||||
// </div>
|
||||
// </section>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ProductSuggestion;
|
||||
|
||||
// ProductSuggestion.defaultProps = {
|
||||
// suggestions: [
|
||||
// {
|
||||
// productImage: productImg,
|
||||
// productTitle: "لپ تاپ گیمینگ ایسوس",
|
||||
// productPrice: "750000",
|
||||
// plusIcon: null,
|
||||
// },
|
||||
// {
|
||||
// productImage: productImg,
|
||||
// productTitle: "مانیتور 40 اینچ",
|
||||
// productPrice: "3.000.000",
|
||||
// plusIcon: plus,
|
||||
// },
|
||||
// {
|
||||
// productImage: productImg,
|
||||
// productTitle: "ماوس گیمینگ",
|
||||
// productPrice: "650/000",
|
||||
// plusIcon: plus,
|
||||
// },
|
||||
// {
|
||||
// productImage: productImg,
|
||||
// productTitle: "لپ تاپ مک بوک پرو 2022",
|
||||
// productPrice: "2000",
|
||||
// plusIcon: plus,
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
export default Testttt; |
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue