diff --git a/src/App.js b/src/App.js index cc422bf..e1c6260 100644 --- a/src/App.js +++ b/src/App.js @@ -26,13 +26,15 @@ import Alert from "./components/Alert"; import Toast from "./components/Toast"; import ProductSuggestion from "./components/ProductSuggestion"; import ProductImage from "./components/ProductImage"; +import VodProduct from "./components/VodProduct"; function App() { return (
- - + {/* */} + {/* */} + {/* */} {/* */} {/* */} diff --git a/src/components/VodProduct/danovin.mp4 b/src/components/VodProduct/danovin.mp4 new file mode 100644 index 0000000..faba880 Binary files /dev/null and b/src/components/VodProduct/danovin.mp4 differ diff --git a/src/components/VodProduct/index.js b/src/components/VodProduct/index.js new file mode 100644 index 0000000..6f0a0e9 --- /dev/null +++ b/src/components/VodProduct/index.js @@ -0,0 +1,323 @@ +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 ( +
+ {/* product UI Design */} +
+
+
+ {/* product image */} +
setOpenModal(true)} + > + {/* icons on image */} +
+ {discountPricePercent && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} +
+ {/* play button */} +
setOpenModal(true)} + > + setOpenModal(true)} + /> +
+ {/* select Color */} + {productColor && ( +
+ {/* {colors.map((color,index))} */} + + +
+ )} +
+ {/* product content */} +
+ {/* content */} +
+
+

+ نسخه چاپی علموم تجربه هفتم +

+ {productCat && ( + + پایه سوم + + )} +
+ {productContent && ( +

+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های + خوب دیگری نیز دارد. +

+ )} +
+ {/* price */} +
+ {priceHolder && ( +
+ {/* price */} +
+
+ {priceTitle && ( + + قیمت + + )} + {discountPrice && ( +

+ قیمت 140تومان +

+ )} +
+

+ 111.000تومان +

+
+ {/* add to cart */} + {addToCartHolder && ( + + )} +
+ )} + {star && ( +
+ + + 39 + +
+ )} +
+ {productTags && ( +
+ + + +
+ )} + {rangeHolder && ( +
+
+
+ )} +
+
+
+
+
setOpenModal(false)} + > + +
+
+ ); +}; +// 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", +};