From a07c349a381551ca88a2d18e605a4456d5373398 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Mon, 24 Jan 2022 15:40:40 +0330 Subject: [PATCH] Product Item Styled --- src/components/Product/index.js | 31 ++++++++++++++++-------------- src/views/Products/index.js | 4 ++-- src/views/Products/layouts/Main.js | 17 +++++++++------- tailwind.config.js | 2 ++ 4 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/components/Product/index.js b/src/components/Product/index.js index 58bfe0f..f77e1f9 100644 --- a/src/components/Product/index.js +++ b/src/components/Product/index.js @@ -39,14 +39,16 @@ const ProductDesign = ({ productName, productGrade, productPrice, - productImg + productImg, + writeGHEIMAT, + numberOfRegards }) => { const [isHovering, setIsHovering] = useState(false); return ( -
-
+
+
{/* product image */}
@@ -71,7 +73,7 @@ const ProductDesign = ({ )}
{/* img */} -
+
{verticalImg && (

{productName}

@@ -143,8 +145,8 @@ const ProductDesign = ({

)} {productCat && ( - - {productGrade} + + {productCat} )}
@@ -152,8 +154,8 @@ const ProductDesign = ({ {star && (
- - 39 + + بر اساس {numberOfRegards} بررسی
)} @@ -168,7 +170,7 @@ const ProductDesign = ({ priceDirection.indexOf("col") !== -1 ? "inline" : "flex" }`} > - قیمت + {writeGHEIMAT && قیمت} {/* price with line on it */} {discountPrice && (

@@ -176,8 +178,8 @@ const ProductDesign = ({

)}
-

- {productPrice}تومان +

+ {productPrice} تومان

{/* add to cart */} @@ -261,5 +263,6 @@ ProductDesign.defaultProps = { productTitleAlignment: "text-justify", //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم priceDirection: "flex-row", - productImg: book + productImg: book, + writeGHEIMAT: false }; diff --git a/src/views/Products/index.js b/src/views/Products/index.js index a7d1cf4..fe69b29 100644 --- a/src/views/Products/index.js +++ b/src/views/Products/index.js @@ -163,11 +163,11 @@ export const Products = ({ ) : (
-
+
)}
diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Main.js index 9d1359c..9252c10 100644 --- a/src/views/Products/layouts/Main.js +++ b/src/views/Products/layouts/Main.js @@ -44,8 +44,8 @@ export const Main = ({ isMobile, title: 'محبوب ترین' }, ]; - return
-
+ return
+
@@ -60,8 +60,8 @@ export const Main = ({ isMobile, }
-
-
+ +
{selectedGrade ? gradeFilterBooks?.map((product, index) => ( ))}
-
+
; }; diff --git a/tailwind.config.js b/tailwind.config.js index b7770a8..fc5e01b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,6 +29,7 @@ module.exports = { grayE3: "#E3E3E3", grayEE: "#EEEEEE", grayF9: "#F9F9F9", + grayF4: "#EBF0F4", }), textColor: (theme) => ({ ...theme("colors"), @@ -77,6 +78,7 @@ module.exports = { '5xl': '3rem', '6xl': '4rem', '7xl': '5rem', + 'sm-1': '0.5rem' }, extend: { borderRadius: {