Products (id = 1) changed for mobile version

src/components/Product/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { BsExclamationSquareFill } from "react-icons/bs";
 
-
+import { connect } from "react-redux";
 
 
 const ProductDesign = ({
@@ -36,7 +36,8 @@ const ProductDesign = ({
   hoverMode,
   teacher,
   btnOnClick,
-  catId
+  catId,
+  isMobile
 }) => {
   const [isHovering, setIsHovering] = useState(false);
 
@@ -75,8 +76,8 @@ const ProductDesign = ({
 
   if (catId == 1) {
     return (
-      <div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
+      <div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
-        style={{ width: '375px', direction: 'rtl' }}
+        style={{ width: !isMobile && '375px' , direction: 'rtl' }}
 
       >
 
@@ -119,7 +120,7 @@ const ProductDesign = ({
   }
   if (catId == 2) {
     return (
-      <div className="flex p-6 pl-0 pb-0 border border-red82OP my-4 rounded-lg" style={{width: '90%' , marginRight: '5%'}}>
+      <div className="flex p-6 pl-0 pb-0 border border-red82OP my-4 rounded-lg" style={{width: '90%' }}>
         <div className="h-full w-60 pl-4">
           {/* image */}
           <img src="https://fa.tripyar.com/uploads/picture/2977/2.jpg" className="h-full rounded-md" />
@@ -274,8 +275,12 @@ const ProductDesign = ({
     return <div></div>
   }
 };
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
+const mapDispatchToProps = ({});
 
-export default ProductDesign;
+export default connect(mapStateToProps, mapDispatchToProps)(ProductDesign);
 
 
 

src/view/services/index.js

@@ -429,7 +429,7 @@ if (!isMobile){
   // Mobile Version
   else{
     return(
-    <div className="flex flex-col items-center mt-16 rtl">
+    <div className="flex flex-col items-center mt-16 mb-40 rtl">
 
       <Games
             selectedGames={selectedGames}
@@ -577,6 +577,80 @@ if (!isMobile){
             </div>
           </div>
           <div className="w-11/12 border-b border-gray-200"></div>
+
+          <div
+          className={`flex items-center w-full justify-center flex-col `}
+        >
+          {books?.map((product, index) => (
+            <Link
+              //  to={"/class/" + product?.id}
+              to="#"
+              onClick={() => {
+                setPopUpContent({
+                  id: gameId,
+                  title: product?.name,
+                  video: "",
+                  teacher: product.vodTeacher,
+                  description:
+                    "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
+                  price: product.product[0].price,
+                  classHour: 21,
+                  classMinute: 56,
+                  image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
+                  examCont : [
+                    {
+                      title: 'بخش اول آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۳',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۱۸',
+                      price: 10000
+                    },
+                    {
+                      title: 'بخش دوم آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۴',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۱۸',
+                      price: 10000
+                    },
+                    {
+                      title: 'بخش سوم آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۵',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۳۲',
+                      price: 250000
+                    },
+                  ]
+                });
+                setPopUp(true);
+                console.log(gameId)
+              }}
+            >
+              {/* {console.log(product)} */}
+              <Product
+                key={index}
+                productsType={filter.productsType}
+                product={product}
+                index={Number(index)}
+                productName={`${product?.name}`}
+                productCat={`پایه ${grades[product?.gradeId]}`}
+                productPrice={product.product[0].price}
+                // productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                numberOfRegards={160}
+                productHolderBorder=""
+                productHolderHoverBorder="shadow-md"
+                teacher={product.vodTeacher}
+                catId={gameId}
+                btnOnClick={() =>
+                  pushToCart({
+                    productId: product?.productId,
+                    userId: product?.userId,
+                    count: 1,
+                  })
+                }
+              />
+            </Link>
+          ))}
+</div>
     </div>
     )
   }