From df6a12fea4ce50eb04daef7f419e3d61684015d5 Mon Sep 17 00:00:00 2001 From: mahdi Date: Sat, 14 May 2022 13:47:08 +0430 Subject: [PATCH] update 2 files and delete 4 files --- .../SingleProduct/ProductDesign1/index.js | 14 +- .../productDesign/ProductDesign.css | 1 - .../productDesign/ProductDesign.css.map | 9 - src/components/productDesign/ProductDesign.js | 324 ------------------ .../productDesign/ProductDesign.scss | 0 src/index.scss | 2 - 6 files changed, 12 insertions(+), 338 deletions(-) delete mode 100644 src/components/productDesign/ProductDesign.css delete mode 100644 src/components/productDesign/ProductDesign.css.map delete mode 100644 src/components/productDesign/ProductDesign.js delete mode 100644 src/components/productDesign/ProductDesign.scss diff --git a/src/components/SingleProduct/ProductDesign1/index.js b/src/components/SingleProduct/ProductDesign1/index.js index 9c6113d..8244d57 100644 --- a/src/components/SingleProduct/ProductDesign1/index.js +++ b/src/components/SingleProduct/ProductDesign1/index.js @@ -40,10 +40,12 @@ const Design1 = ({ productTags, + hoverEffect, + priceDirection, }) => { return ( -
+
{/* product image */}
{/* icons on image */} @@ -196,6 +198,12 @@ const Design1 = ({ /> )}
+ {/* {hoverEffect && ( )} */} +
+
); }; @@ -238,6 +246,8 @@ Design1.defaultProps = { productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"], + hoverEffect: false, + //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم - priceDirection: "flex-col", + priceDirection: "flex-row", }; diff --git a/src/components/productDesign/ProductDesign.css b/src/components/productDesign/ProductDesign.css deleted file mode 100644 index 0a89455..0000000 --- a/src/components/productDesign/ProductDesign.css +++ /dev/null @@ -1 +0,0 @@ -/* No CSS *//*# sourceMappingURL=ProductDesign.css.map */ \ No newline at end of file diff --git a/src/components/productDesign/ProductDesign.css.map b/src/components/productDesign/ProductDesign.css.map deleted file mode 100644 index 4e6cde4..0000000 --- a/src/components/productDesign/ProductDesign.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "version": 3, - "mappings": "", - "sources": [ - "ProductDesign.scss" - ], - "names": [], - "file": "ProductDesign.css" -} \ No newline at end of file diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js deleted file mode 100644 index c081962..0000000 --- a/src/components/productDesign/ProductDesign.js +++ /dev/null @@ -1,324 +0,0 @@ -import React, { useEffect, useState } from "react"; -import "./ProductDesign.scss"; - -import StarRating from "../starRating/StarRating"; - -import ReactTooltip from "react-tooltip"; - -import book from "../../assets/images/goldon.png"; -import watermelon from "../../assets/images/watermelon.png"; - -import heart from "../../assets/icons/vuesax-linear-heart.svg"; -import discountImg from "../../assets/icons/discount.png"; - -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 Button from "../Button"; - -const ProductDesign = ({ - colors, - likeBtn, - discount, - discountPricePercent, - discountPrice, - productContent, - star, - productTags, - priceDirection, - productTitleAlignment, - priceHolder, - productHolderBorder, - productHolderBorderColor, - productTitleColor, - productExcerptTextColor, - productCat, - productCatTextColor, - rangeHolder, - verticalImg, - horizontalImg, - rangeWidth, - addToCartHolder, - mainPriceTitle, -}) => { - const [progressFlag, setProgressFlag] = useState(false); - - useEffect(() => { - setTimeout(() => { - setProgressFlag(true); - }, 1000); - }, []); - - return ( -
- {/* title holder */} -
-

آیتم محصولات

- -
-
-

- نام این کامپوننت - - productDesign - - است و داخل این کامپوننت شما میتوانید با - - true - false - - کردن - - Props - - ها به صورت داینامیک دیزاین های مختلفی را مشاهده کنید شما همچنین - میتوانید با تغییر دادن مقدار PriceDirection به یکی از این - ها: -
- - flex-row/flex-row-reverse/flex-column/flex-column-reverse - - دیزاین های متفاوتی را برای قسمت قیمت و اضافه کردن به سبد خرید هر محصول - ببینید. -

-

- برای نمایش ستاره ها من از یک کامپوننت استفاده کردم ==== - - Star Rating - -

-
- {/* product UI Design */} -
-
-
- {/* product image */} -
- {/* icons on image */} -
- {discountPricePercent && ( -
-

- 23% -

-
- )} - {likeBtn && ( -
- -
- )} - {discount && ( -
- -
- )} -
- {/* img */} -
- {verticalImg && ( - - )} - {horizontalImg && ( - - )} -
- {/* select Color */} - {colors && ( -
- - - - - - - - -
- )} -
- {/* product content */} -
-
-

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

- {productContent && ( -

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

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

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

- )} -
-

- 130.000تومان -

-
- {/* add to cart */} - {addToCartHolder && ( - - )} -
- )} - {productTags && ( -
- - - -
- )} - {rangeHolder && ( -
-
-
- )} -
- {/* dark hover effect */} -
-
-
-
-
- ); -}; - -export default ProductDesign; - -// 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 - -ProductDesign.defaultProps = { - // icons on product image - colors: true, - likeBtn: true, - discount: true, - discountPricePercent: true, - // product price - mainPriceTitle: false, - discountPrice: true, - priceHolder: true, - - productContent: true, - star: true, - productTags: true, - productCat: true, - rangeHolder: true, - - // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع - verticalImg: true, - horizontalImg: false, - - addToCartHolder: true, - - productTitleColor: "text-productTitle", - - productExcerptTextColor: "text-productContent", - - productCatTextColor: "text-darkCrimsonTextColor", - // برای درصد دادن به عرض رنج - rangeWidth: "72%", - //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم - productHolderBorder: "border", - productHolderBorderColor: "border-grayBorderColor", - - productTitleAlignment: "text-justify", - //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم - priceDirection: "flex-row", -}; diff --git a/src/components/productDesign/ProductDesign.scss b/src/components/productDesign/ProductDesign.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.scss b/src/index.scss index d51fba5..e401128 100644 --- a/src/index.scss +++ b/src/index.scss @@ -12,8 +12,6 @@ src: url(./assets/fonts/IRANSansWeb_Bold.woff); } -@import "./components/productDesign/ProductDesign.scss"; - body { font-family: iransans-medium; direction: rtl;