Product And Star Rating Fixed

src/components/Product/index.js

@@ -55,7 +55,7 @@ const ProductDesign = ({
     >
       <div className="w-full flex flex-wrap items-center justify-around my-5 px-4" >
         <div
-          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}`}
+          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} hover:` }
           onMouseEnter={() => setIsHovering(true)}
           onMouseLeave={() => setIsHovering(false)}
         >
@@ -155,7 +155,7 @@ const ProductDesign = ({
             {/* star */}
             {star && (
               <div className="flex items-center mt-3">
-                <StarRating value={starRate} />
+                <StarRating value={starRate} size={big ? '' : 'small'}/>
                 <span className="text-xs text-productContent font-bold text-gray-500 mr-2">
                   بر اساس {numberOfRegards} بررسی
                 </span>

src/components/StarRating/index.js

@@ -3,7 +3,7 @@ import StarRatingComponent from "react-star-rating-component";
 import starGrayIcon from '../../assets/icons/starGray.svg';
 import starYellowIcon from '../../assets/icons/starYellow.svg';
 
-function StarRating({value}) {
+function StarRating({value, size}) {
   const [rate, setRating] = useState(value);
   return (
     <StarRatingComponent
@@ -12,15 +12,15 @@ function StarRating({value}) {
       renderStarIcon={(index, value)=> {
         if (index <= value){
         return (
-        <img src={starYellowIcon} className="w-5"/>
+        <img src={starYellowIcon} className={size == 'small' ? 'w-3' : 'w-5'}/>
         );
         }
-        return (<img src={starGrayIcon} className="w-5"/>);
+        return (<img src={starGrayIcon} className={size == 'small' ? 'w-3' : 'w-5'}/>);
         }}
 
       value={rate}
       size='35'
-      onStarHover={(value) => setRating(value)}
+      // onStarHover={(value) => setRating(value)}
     />
   );
 }