From 52c8330f0c9362a9fa17fd5e32a1ec5c1cfd15e6 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Wed, 11 May 2022 18:13:31 +0430 Subject: [PATCH] update 3 files and delete 10 files --- .../SingleProduct/ProductDesign1/index.js | 263 ++++++++++++++++++ src/components/Tag/index.js | 46 ++- src/redux/data.js | 22 ++ 3 files changed, 305 insertions(+), 26 deletions(-) create mode 100644 src/components/SingleProduct/ProductDesign1/index.js diff --git a/src/components/SingleProduct/ProductDesign1/index.js b/src/components/SingleProduct/ProductDesign1/index.js new file mode 100644 index 0000000..24471e7 --- /dev/null +++ b/src/components/SingleProduct/ProductDesign1/index.js @@ -0,0 +1,263 @@ +import React, { useState } from "react"; +import ReactTooltip from "react-tooltip"; +import TagDesign1 from "../Tag/TagDesign1"; + +import StarRating from "../../Rating/StarRating1"; + +const Design1 = ({ + colors, + likeBtn, + discount, + discountPricePercent, + discountPrice, + productContent, + star, + productTags, + priceDirection, + productTitleAlignment, + priceHolder, + productHolderBorder, + productHolderBorderColor, + productTitleColor, + productExcerptTextColor, + productCat, + productCatTextColor, + rangeHolder, + verticalImg, + horizontalImg, + rangeWidth, + addToCartHolder, +}) => { + const [isHovering, setIsHovering] = useState(false); + return ( +
+
+
+ {/* product image */} +
+ {/* icons on image */} +
+ {discountPricePercent && ( +
+

+ 23% +

+
+ )} + {likeBtn && ( +
+ +
+ )} + {discount && ( +
+ +
+ )} +
+ {/* img */} +
+ {verticalImg && ( + setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + /> + )} + {horizontalImg && ( + + )} +
+ {/* select Color */} + {colors && ( +
+ + + + + + + + +
+ )} +
+ +
+
+ {/* product content */} +
+
+

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

+ {productContent && ( +

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

+ )} + {productCat && ( + + پایه سوم + + )} +
+ {/* star */} + {star && ( +
+ + + 39 + +
+ )} + {/* price */} + {priceHolder && ( +
+
+
+ قیمت + {/* price with line on it */} + {discountPrice && ( +

+ 145تومان +

+ )} +
+

+ 145.000تومان +

+
+ {/* add to cart */} + {addToCartHolder && ( + + )} +
+ )} + {productTags && ( +
+ {productTags.map((item, index) => ( + + ))} +
+ )} + {rangeHolder && ( +
+
+
+ )} +
+
+
+
+ ); +}; + +export default Design1; + +// 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 + +Design1.defaultProps = { + // icons on product image + colors: true, + likeBtn: true, + discount: true, + discountPricePercent: true, + // product price + discountPrice: true, + priceHolder: true, + + productContent: true, + star: true, + productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"], + productCat: true, + rangeHolder: true, + + // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع + verticalImg: true, + horizontalImg: false, + + addToCartHolder: true, + + productTitleColor: "text-productTitle", + + productExcerptTextColor: "text-productContent", + + productCatTextColor: "text-darkCrimsonTextColor", + // برای درصد دادن به عرض رنج + rangeWidth: "w-44", + //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم + productHolderBorder: "border", + productHolderBorderColor: "border-grayBorderColor", + + productTitleAlignment: "text-justify", + //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم + priceDirection: "flex-row", +}; diff --git a/src/components/Tag/index.js b/src/components/Tag/index.js index 337dcbd..4627f35 100644 --- a/src/components/Tag/index.js +++ b/src/components/Tag/index.js @@ -1,31 +1,25 @@ -import React from "react"; +import React, { useState } from "react"; -import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg"; +import Design1 from "./TagDesign1"; -const ProductTags = ({ - titleColor, - title, - tagBgColor, - tagBorderColor, - icon, -}) => { +function Tag() { + const list = { + 1: , + }; + const [type, setType] = useState(1); return ( - +
+ + {list[type]} +
); -}; +} -export default ProductTags; - -ProductTags.defaultProps = { - title: "کتاب", - titleColor: "text-blue-600", - tagBgColor: "bg-blue-300 bg-opacity-10", - tagBorderColor: "border-blue-200", - // for icons - icon: blackCancleIcon, -}; +export default Tag; diff --git a/src/redux/data.js b/src/redux/data.js index be2cc23..329bf6b 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -22,6 +22,8 @@ import Navbar from "../components/Navbar"; import SearchDesign from "../components/SearchDesign"; import SwitchDesign from "../components/SwitchDesign"; import Sidebar from "../components/Sidebar"; +import SingleProduct from "../components/SingleProduct"; +import Rating from "../components/Rating"; // mini components import MiniComponents from "../components/MiniComponents"; @@ -555,6 +557,26 @@ const components = [ code: null, }, }, + { + name: "Single Product", + author: "Andalib", + props: [], + content: { + name: "Single Product", + component: , + code: null, + }, + }, + { + name: "Rating", + author: "Andalib/Ashrafi", + props: [], + content: { + name: "Rating", + component: , + code: null, + }, + }, // mini components { name: "Mini Components",