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