diff --git a/public/images/VodDesign1discount.png b/public/images/VodDesign1discount.png new file mode 100644 index 0000000..eff7853 Binary files /dev/null and b/public/images/VodDesign1discount.png differ diff --git a/public/images/VodDesign1lightBlueDotIcon.svg b/public/images/VodDesign1lightBlueDotIcon.svg new file mode 100644 index 0000000..fc3cc88 --- /dev/null +++ b/public/images/VodDesign1lightBlueDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/VodDesign1purpleDotIcon.svg b/public/images/VodDesign1purpleDotIcon.svg new file mode 100644 index 0000000..1859629 --- /dev/null +++ b/public/images/VodDesign1purpleDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/VodDesign1redDotIcon.svg b/public/images/VodDesign1redDotIcon.svg new file mode 100644 index 0000000..1c20427 --- /dev/null +++ b/public/images/VodDesign1redDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/VodDesign1vuesax-linear-heart.svg b/public/images/VodDesign1vuesax-linear-heart.svg new file mode 100644 index 0000000..306bf40 --- /dev/null +++ b/public/images/VodDesign1vuesax-linear-heart.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/VodDesign1watermelon.png b/public/images/VodDesign1watermelon.png new file mode 100644 index 0000000..fb5efe7 Binary files /dev/null and b/public/images/VodDesign1watermelon.png differ diff --git a/public/images/VodDesign1white-play-button-icon.svg b/public/images/VodDesign1white-play-button-icon.svg new file mode 100644 index 0000000..fbbe9f7 --- /dev/null +++ b/public/images/VodDesign1white-play-button-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/VodDesign1yellowDotIcon.svg b/public/images/VodDesign1yellowDotIcon.svg new file mode 100644 index 0000000..bd9e33e --- /dev/null +++ b/public/images/VodDesign1yellowDotIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/danovin.mp4 b/public/images/danovin.mp4 new file mode 100644 index 0000000..faba880 Binary files /dev/null and b/public/images/danovin.mp4 differ diff --git a/src/components/SingleProduct/VodDesign1/index.js b/src/components/SingleProduct/VodDesign1/index.js new file mode 100644 index 0000000..374943e --- /dev/null +++ b/src/components/SingleProduct/VodDesign1/index.js @@ -0,0 +1,344 @@ +import React, { useEffect, useState } from "react"; + +import StarRating from "../StarRating"; +import ReactTooltip from "react-tooltip"; + +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"; + +const VodDesign1 = ({ + 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 ( +
+ رویه باتن پلی / عکس کلیک کنید + {/* product UI Design */} +
+
+
+ {/* product image */} +
+ {/* 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 && ( +
+
+
+ )} +
+
+
+
+ +
+ ); +}; +// hover:-translate-y-2 +export default VodDesign1; + +// 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 + +VodDesign1.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", +}; diff --git a/src/components/SingleProduct/index.js b/src/components/SingleProduct/index.js index 2cbb1dd..f8e953d 100644 --- a/src/components/SingleProduct/index.js +++ b/src/components/SingleProduct/index.js @@ -1,10 +1,12 @@ import React, { useState } from "react"; import ProductDesign1 from "./ProductDesign1"; +import VodDesign1 from "./VodDesign1"; function SingleProduct() { const list = { 1: , + 2: , }; const [type, setType] = useState(1); return ( diff --git a/src/components/Stepper/index.js b/src/components/Stepper/index.js index 6ffac8e..b9f6cf9 100644 --- a/src/components/Stepper/index.js +++ b/src/components/Stepper/index.js @@ -14,7 +14,7 @@ function Stepper({ direction === "horizontal" ? "flex-row" : "flex-col" }`} > - {[1,2,3,4,5,6,7].map((item, index) => ( + {[1, 2, 3, 4, 5, 6, 7].map((item, index) => ( {Number(index) + 1} - {count !== (Number(index) + 1) && ( + {count !== Number(index) + 1 && ( )} @@ -80,5 +88,5 @@ Stepper.defaultProps = { activeColor: "#06BACE", deactiveColor: "#DBDBDB", count: 7, - currentStep : 4, + currentStep: 4, };