|  |  |  | @ -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="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4" onMouseEnter={() => setIsHovering(true)} | 
			
		
	
		
			
				
					|  |  |  |  |     <div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm-1' : 'w-48 m-2'} `} | 
			
		
	
		
			
				
					|  |  |  |  |     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"> | 
			
		
	
		
			
				
					|  |  |  |  |                 <StarRating /> | 
			
		
	
		
			
				
					|  |  |  |  |                 <span className="text-sm-1 text-productContent font-bold mr-2"> | 
			
		
	
		
			
				
					|  |  |  |  |               <div className="flex items-center mt-3"> | 
			
		
	
		
			
				
					|  |  |  |  |                 <StarRatingComponent | 
			
		
	
		
			
				
					|  |  |  |  |                 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> | 
			
		
	
	
		
			
				
					|  |  |  | 
 |