|  |  |  | @ -10,51 +10,46 @@ const maxDesktopSize = 1250; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const fontSize = { | 
			
		
	
		
			
				
					|  |  |  |  |   mobile: { | 
			
		
	
		
			
				
					|  |  |  |  |     h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26, | 
			
		
	
		
			
				
					|  |  |  |  |     h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22, | 
			
		
	
		
			
				
					|  |  |  |  |     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34, | 
			
		
	
		
			
				
					|  |  |  |  |     div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32, | 
			
		
	
		
			
				
					|  |  |  |  |     a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 26, | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  |   desktop: { | 
			
		
	
		
			
				
					|  |  |  |  |     h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, | 
			
		
	
		
			
				
					|  |  |  |  |     div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, | 
			
		
	
		
			
				
					|  |  |  |  |     old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120, | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | } | 
			
		
	
		
			
				
					|  |  |  |  | }; | 
			
		
	
		
			
				
					|  |  |  |  | export default class Product extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |   render() { | 
			
		
	
		
			
				
					|  |  |  |  |     const { product, id } = this.props; | 
			
		
	
		
			
				
					|  |  |  |  |     return ( | 
			
		
	
		
			
				
					|  |  |  |  |       <> | 
			
		
	
		
			
				
					|  |  |  |  |         {window.innerWidth < 1000 ? ( | 
			
		
	
		
			
				
					|  |  |  |  |           <div | 
			
		
	
		
			
				
					|  |  |  |  |           className="mobile-mybooks__item d-flex flex-column" | 
			
		
	
		
			
				
					|  |  |  |  |           style={{ | 
			
		
	
		
			
				
					|  |  |  |  |             borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0, | 
			
		
	
		
			
				
					|  |  |  |  |             borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0, | 
			
		
	
		
			
				
					|  |  |  |  |           }} | 
			
		
	
		
			
				
					|  |  |  |  |         > | 
			
		
	
		
			
				
					|  |  |  |  |           <div className="mobile-products-product d-flex flex-column"> | 
			
		
	
		
			
				
					|  |  |  |  |             <img src={product.image} alt={"عکس مجصول"} /> | 
			
		
	
		
			
				
					|  |  |  |  |           <div className="mobile-mybooks__item--buttons d-flex flex-column"> | 
			
		
	
		
			
				
					|  |  |  |  |             <div className="mobile-products-product__info d-flex flex-column"> | 
			
		
	
		
			
				
					|  |  |  |  |               <h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.title}</h1> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  |             <div className="mobile-products-product__links d-flex mt-2"> | 
			
		
	
		
			
				
					|  |  |  |  |               <Link | 
			
		
	
		
			
				
					|  |  |  |  |               style={{ | 
			
		
	
		
			
				
					|  |  |  |  |                 background: product.status.digital ? "#FFEE00" : "#FFFFFF", | 
			
		
	
		
			
				
					|  |  |  |  |                 fontSize: fontSize.mobile.a, | 
			
		
	
		
			
				
					|  |  |  |  |                 color: product.status.ar ? "#4D4D4F" : "#4D4D4F", | 
			
		
	
		
			
				
					|  |  |  |  |               }} | 
			
		
	
		
			
				
					|  |  |  |  |                 style={{ fontSize: fontSize.mobile.a }} | 
			
		
	
		
			
				
					|  |  |  |  |                 className="mobile-products-product__links--physical" | 
			
		
	
		
			
				
					|  |  |  |  |               > | 
			
		
	
		
			
				
					|  |  |  |  |                 کتاب دیجیتال | 
			
		
	
		
			
				
					|  |  |  |  |               { !product.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null} | 
			
		
	
		
			
				
					|  |  |  |  |                 {!product.status.digital ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <img src={basket} alt="افزودن به سبد خرید" /> | 
			
		
	
		
			
				
					|  |  |  |  |                 ) : null} | 
			
		
	
		
			
				
					|  |  |  |  |               </Link> | 
			
		
	
		
			
				
					|  |  |  |  |               <Link | 
			
		
	
		
			
				
					|  |  |  |  |               style={{ | 
			
		
	
		
			
				
					|  |  |  |  |                 background: product.status.ar ? "#00CC69" : "#FFFFFF", | 
			
		
	
		
			
				
					|  |  |  |  |                 color: product.status.ar ? "#FFFFFF" : "#4D4D4F", | 
			
		
	
		
			
				
					|  |  |  |  |                 fontSize: fontSize.mobile.a, | 
			
		
	
		
			
				
					|  |  |  |  |               }} | 
			
		
	
		
			
				
					|  |  |  |  |                 style={{ fontSize: fontSize.mobile.a }} | 
			
		
	
		
			
				
					|  |  |  |  |                 className="mobile-products-product__links--ar" | 
			
		
	
		
			
				
					|  |  |  |  |               > | 
			
		
	
		
			
				
					|  |  |  |  |                 واقعیت افزوده | 
			
		
	
		
			
				
					|  |  |  |  |               { !product.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null} | 
			
		
	
		
			
				
					|  |  |  |  |                 {!product.status.ar ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <img src={basket} alt="افزودن به سبد خرید" /> | 
			
		
	
		
			
				
					|  |  |  |  |                 ) : null} | 
			
		
	
		
			
				
					|  |  |  |  |               </Link> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  |           </div> | 
			
		
	
	
		
			
				
					|  |  |  | @ -63,23 +58,34 @@ export default class Product extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |           <article className="products-product d-flex flex-column align-items"> | 
			
		
	
		
			
				
					|  |  |  |  |             <Link to={`/products/${product.id}`}> | 
			
		
	
		
			
				
					|  |  |  |  |               <img src={product.image} alt={product.title} /> | 
			
		
	
		
			
				
					|  |  |  |  |               <h1 style={{ fontSize: fontSize.desktop.h1 }}>{product.title  + ' ' +  product.subTitle}</h1> | 
			
		
	
		
			
				
					|  |  |  |  |               <h1 style={{ fontSize: fontSize.desktop.h1 }}> | 
			
		
	
		
			
				
					|  |  |  |  |                 {product.title + " " + product.subTitle} | 
			
		
	
		
			
				
					|  |  |  |  |               </h1> | 
			
		
	
		
			
				
					|  |  |  |  |               {product.price ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                 <div className="products-product__price d-flex justify-content-center align-items-center"> | 
			
		
	
		
			
				
					|  |  |  |  |                   {product.oldPrice ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                     <div> | 
			
		
	
		
			
				
					|  |  |  |  |                       <div style={{ fontSize: fontSize.desktop.old }} className="products-product__price--old d-flex"> | 
			
		
	
		
			
				
					|  |  |  |  |                       <div | 
			
		
	
		
			
				
					|  |  |  |  |                         style={{ fontSize: fontSize.desktop.old }} | 
			
		
	
		
			
				
					|  |  |  |  |                         className="products-product__price--old d-flex" | 
			
		
	
		
			
				
					|  |  |  |  |                       > | 
			
		
	
		
			
				
					|  |  |  |  |                         {product.oldPrice} تومان | 
			
		
	
		
			
				
					|  |  |  |  |                         <span></span> | 
			
		
	
		
			
				
					|  |  |  |  |                       </div> | 
			
		
	
		
			
				
					|  |  |  |  |                     </div> | 
			
		
	
		
			
				
					|  |  |  |  |                   ) : null} | 
			
		
	
		
			
				
					|  |  |  |  |                   <div style={{ fontSize: fontSize.desktop.div }} className="products-product__price--price"> | 
			
		
	
		
			
				
					|  |  |  |  |                   <div | 
			
		
	
		
			
				
					|  |  |  |  |                     style={{ fontSize: fontSize.desktop.div }} | 
			
		
	
		
			
				
					|  |  |  |  |                     className="products-product__price--price" | 
			
		
	
		
			
				
					|  |  |  |  |                   > | 
			
		
	
		
			
				
					|  |  |  |  |                     {product.price} تومان | 
			
		
	
		
			
				
					|  |  |  |  |                   </div> | 
			
		
	
		
			
				
					|  |  |  |  |                 </div> | 
			
		
	
		
			
				
					|  |  |  |  |               ) : ( | 
			
		
	
		
			
				
					|  |  |  |  |                 <div style={{ fontSize: fontSize.desktop.div }} className="products-product__notAvailabe"> | 
			
		
	
		
			
				
					|  |  |  |  |                 <div | 
			
		
	
		
			
				
					|  |  |  |  |                   style={{ fontSize: fontSize.desktop.div }} | 
			
		
	
		
			
				
					|  |  |  |  |                   className="products-product__notAvailabe" | 
			
		
	
		
			
				
					|  |  |  |  |                 > | 
			
		
	
		
			
				
					|  |  |  |  |                   ناموجود | 
			
		
	
		
			
				
					|  |  |  |  |                 </div> | 
			
		
	
		
			
				
					|  |  |  |  |               )} | 
			
		
	
	
		
			
				
					|  |  |  | @ -90,4 +96,3 @@ export default class Product extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |     ); | 
			
		
	
		
			
				
					|  |  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  |  | } | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
	
		
			
				
					|  |  |  | 
 |