Product Fixed And Added A New Mode: Big

src/components/Product/index.js

@@ -12,6 +12,7 @@ import YellowDotIcon from "./yellowDotIcon.svg";
 import RedDotIcon from "./redDotIcon.svg";
 import PurpleDotIcon from "./purpleDotIcon.svg";
 import LightBlueDotIcon from "./lightBlueDotIcon.svg";
+import StarRatingComponent from "react-star-rating-component";
 
 const ProductDesign = ({
   colors,
@@ -42,15 +43,20 @@ const ProductDesign = ({
   writeGHEIMAT,
   numberOfRegards,
   productHolderHoverBorder,
-  hoverMode
+  hoverMode,
+  big,
+  starRate
 }) => {
   const [isHovering, setIsHovering] = useState(false);
   return (
-    <div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
+    <div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm-1' : 'w-48 m-2'} `}
-      <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4" onMouseEnter={() => setIsHovering(true)}
+    style={big ? {width: '300px'} : {}}
+    
+    >
+      <div className="w-full flex flex-wrap items-center justify-around my-5 px-4" onMouseEnter={() => setIsHovering(true)}
                   onMouseLeave={() => setIsHovering(false)}>
         <div
-          className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-blue-100' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
+          className={`w-full sm:w-60 md:w-72 ${big ? '' : 'mx-5'} rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-grayF4' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
         >
           {/* product image */}
           <div className="w-full relative">
@@ -75,7 +81,7 @@ const ProductDesign = ({
               )}
             </div>
             {/* img */}
-            <div className="w-full h-48 flex bg-grayF4 p-0 justify-center rounded-lg">
+            <div className={`w-full ${big ? 'h-60' : 'h-48'} flex bg-grayF4 p-0 justify-center rounded-lg`}>
               {verticalImg && (
                 <img
                   src={productImg}
@@ -127,7 +133,7 @@ const ProductDesign = ({
           <div className="px-2">
             <div className="mt-4">
               <h2
-                className={`leading-4 text-xs py-1 ${productTitleColor} ${productTitleAlignment}`}
+                className={`leading-4 text-xl font-black py-2 ${productTitleColor} ${productTitleAlignment}`}
               >
                 {productName}
               </h2>
@@ -140,16 +146,19 @@ const ProductDesign = ({
                 </p>
               )}
               {productCat && (
-                <span className={`text-sm font-light ${productCatTextColor}`}>
+                <span className={`text-md py-1 font-light ${productCatTextColor}`}>
                   {productCat}
                 </span>
               )}
             </div>
             {/* star */}
             {star && (
-              <div className="flex items-center mt-2">
+              <div className="flex items-center mt-3">
-                <StarRating />
+                <StarRatingComponent
-                <span className="text-sm-1 text-productContent font-bold mr-2">
+                name="Product"
+                value={starRate}
+                />
+                <span className="text-xs text-productContent font-bold text-gray-500 mr-2">
                   بر اساس {numberOfRegards} بررسی
                 </span>
               </div>
@@ -172,7 +181,7 @@ const ProductDesign = ({
                       </p>
                     )}
                   </div>
-                  <p className="text-sm text-productPrice font-semibold inline text-blue5F">
+                  <p className="text-xl text-productPrice font-semibold inline text-blue5F">
                     {productPrice} <span>تومان</span>
                   </p>
                 </div>

src/components/SalesContainer/index.js

@@ -20,7 +20,7 @@ const SalesContainer = ({
       }, []);
     return(
         <div className="w-full my-10">
-            <div className="w-full border-b-2 border-solid border-gray-300">
+            <div className="w-full">
             <div className="w-1/3 p-10 bg-white flex justify-between items-center" style={{
                 marginBottom:'-5px'
             }} onClick={() => console.log(list)}>
@@ -46,7 +46,7 @@ const SalesContainer = ({
             </div>
 
 </div>    
-        <ScrollContainer className="flex  overflow-x-scroll border-2 border-solid border-gray-300 border-t-0 py-4 px-10">
+        <ScrollContainer className="flex  overflow-x-scroll  border-t-0 py-4 px-10" >
           {
           list?.map((product, index) => (
             <Link to={"/products/" + product?.id}>
@@ -64,6 +64,8 @@ const SalesContainer = ({
                 productCatTextColor='text-blueC0'
                 productHolderBorder=''
                 productHolderHoverBorder='shadow-md'
+                big
+                starRate={Math.floor(Math.random() * 5) + 1}
               />
             </Link>
             ))}

src/components/StarRating/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import StarRatingComponent from "react-star-rating-component";
 
-function StarRating() {
+function StarRating({rate}) {
   const [rate, setRating] = useState(2);
   return (
     <StarRatingComponent
@@ -9,6 +9,7 @@ function StarRating() {
       starCount={5}
       value={rate}
       onStarHover={(value) => setRating(value)}
+      
     />
   );
 }

src/views/Home/Desktop/Part2/index.js

@@ -71,7 +71,8 @@ const Part2 = (
                 productHolderBorder=''
                 productHolderHoverBorder='shadow-md'
                 hoverMode='blue'
-                
+                big
+                starRate={Math.floor(Math.random() * 5) + 1}
               />
             </Link>
             ))}