Product Item Styled

src/components/Product/index.js

@@ -39,14 +39,16 @@ const ProductDesign = ({
   productName,
   productGrade,
   productPrice,
-  productImg
+  productImg,
+  writeGHEIMAT,
+  numberOfRegards
 }) => {
   const [isHovering, setIsHovering] = useState(false);
   return (
-    <div className="flex flex-wrap sm:flex-nowrap justify-around w-48">
+    <div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
-      <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
+      <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4">
         <div
-          className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
+          className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
         >
           {/* product image */}
           <div className="w-full relative">
@@ -71,7 +73,7 @@ const ProductDesign = ({
               )}
             </div>
             {/* img */}
-            <div className="w-full h-48 flex bg-gray-200 p-0 justify-center rounded-lg">
+            <div className="w-full h-48 flex bg-grayF4 p-0 justify-center rounded-lg">
               {verticalImg && (
                 <img
                   src={productImg}
@@ -130,7 +132,7 @@ const ProductDesign = ({
           <div className="px-2">
             <div className="mt-4">
               <h2
-                className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
+                className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`}
               >
                 {productName}
               </h2>
@@ -143,8 +145,8 @@ const ProductDesign = ({
                 </p>
               )}
               {productCat && (
-                <span className={`text-xs font-light ${productCatTextColor}`}>
+                <span className={`text-sm font-light ${productCatTextColor}`}>
-                  {productGrade}
+                  {productCat}
                 </span>
               )}
             </div>
@@ -152,8 +154,8 @@ const ProductDesign = ({
             {star && (
               <div className="flex items-center mt-2">
                 <StarRating />
-                <span className="text-xs text-productContent font-bold mr-2">
+                <span className="text-sm-1 text-productContent font-bold mr-2">
-                  39
+                  بر اساس {numberOfRegards} بررسی
                 </span>
               </div>
             )}
@@ -168,7 +170,7 @@ const ProductDesign = ({
                       priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
                     }`}
                   >
-                    <span className="text-xs text-borderColor ml-2">قیمت</span>
+                    {writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>}
                     {/* price with line on it */}
                     {discountPrice && (
                       <p className="line-through text-xs text-borderColor mr-2">
@@ -176,8 +178,8 @@ const ProductDesign = ({
                       </p>
                     )}
                   </div>
-                  <p className="text-sm text-productPrice font-semibold inline">
+                  <p className="text-sm text-productPrice font-semibold inline text-blue5F">
-                    {productPrice}<span>تومان</span>
+                    {productPrice} <span>تومان</span>
                   </p>
                 </div>
                 {/* add to cart */}
@@ -261,5 +263,6 @@ ProductDesign.defaultProps = {
   productTitleAlignment: "text-justify",
   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
   priceDirection: "flex-row",
-  productImg: book
+  productImg: book,
+  writeGHEIMAT: false
 };

src/views/Products/index.js

@@ -163,11 +163,11 @@ export const Products = ({
           </>
         ) : (
           <div
-            className={`w-full flex flex-row gap-10 px-5`}
+            className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
             // style={{ height: 1500 }}
           >
             <Sidebar />
-            <Main gradeFilterBooks={gradeFilterBooks}/>
+            <Main />
           </div>
         )}
       </div>

src/views/Products/layouts/Main.js

@@ -44,8 +44,8 @@ export const Main = ({ isMobile,
       title: 'محبوب ترین'
     },
   ];
-  return <div className="flex flex-col w-3/4 p-4 ">
+  return <div className="flex flex-col w-3/4 p-4">
-    <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-2.5 justify-center text-blue52">
+    <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
       <div className='flex text-xs items-center mx-4'>
         <img src={filterIcon} />
         <span>
@@ -60,8 +60,8 @@ export const Main = ({ isMobile,
         }
       </ul>
     </div>
-    <div>
+    
-      <div className="w-full flex flex-row flex-wrap mt-3">
+      <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center">
         {selectedGrade
           ? gradeFilterBooks?.map((product, index) => (
             <Product
@@ -80,14 +80,17 @@ export const Main = ({ isMobile,
                 product={product}
                 index={Number(index)}
                 productName={`کتاب ${product?.name}`}
-                productGrade={`پایه ${grades[product?.gradeId]}`}
+                productCat={`پایه ${grades[product?.gradeId]}`}
-                productPrice={1399}
+                productPrice={100000}
                 productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                numberOfRegards={160}
+                productTitleColor='text-blue5F'
+                productCatTextColor='text-blueC0'
               />
             </Link>
           ))}
       </div>
-    </div>
+    
   </div>;
 };
 

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: {