From 97ddcffb7e08c9843c0a4716560786780aee2199 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Sat, 2 Apr 2022 02:20:40 +0430
Subject: [PATCH] Services Page Grid Done

---
 src/components/exam/Carousel/index.js |   2 +-
 src/view/services/index.js            | 684 +++++++++++++-------------
 2 files changed, 341 insertions(+), 345 deletions(-)

diff --git a/src/components/exam/Carousel/index.js b/src/components/exam/Carousel/index.js
index 91ac15f..4bf1232 100644
--- a/src/components/exam/Carousel/index.js
+++ b/src/components/exam/Carousel/index.js
@@ -286,7 +286,7 @@ const MyExamList = ({isMobile}) => {
     <div className="my-exam-list">
       
       <div className="my-exam-list-content rounded-lg">
-          <h1 className='text-right w-full text-red52 pt-4 px-6'>لیست آزمون های من</h1>
+          <h1 className='text-right w-full font-bold text-red52 pt-4 px-6'>لیست آزمون های من</h1>
         <div className="melc-header">
           {data.map((item, i) => (
             <div
diff --git a/src/view/services/index.js b/src/view/services/index.js
index 17377ca..326ccb0 100644
--- a/src/view/services/index.js
+++ b/src/view/services/index.js
@@ -34,7 +34,7 @@ const Services = ({
   videos,
   pushToCart,
 }) => {
- 
+
   const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
   const [filter, setFilter] = useState({
     search: "",
@@ -105,27 +105,27 @@ const Services = ({
   const chooseGame = (id) => {
     setGameId(id);
   };
-if (!isMobile){
-  return (
-    <div
-      className="flex items-start  justify-between"
-      style={{ width: "93.5%", direction: "rtl" }}
-    >
-      {popup ? (
-        <ServicePopUp
-          content={popUpContent}
-          closeOnClick={() => setPopUp(false)}
-        />
-      ) : null}
+  if (!isMobile) {
+    return (
       <div
-        className="w-3/4  flex flex-col justify-center "
-        style={{ marginTop: "5.5%" }}
+        className="flex items-start justify-between"
+        style={{ width: "93.5%", direction: "rtl", height: '100vh' }}
       >
+        {popup ? (
+          <ServicePopUp
+            content={popUpContent}
+            closeOnClick={() => setPopUp(false)}
+          />
+        ) : null}
         <div
-          className="relative h-48 w-full border-b border-red82OP my-4 px-10"
-          style={{ direction: "ltr" }}
+          className="w-3/4  flex flex-col  justify-center "
+          style={{  paddingTop:'5.5%', height: '100vh' }}
         >
-          {/* {
+          <div
+            className="h-48  w-full border-b border-red82OP my-4 px-10"
+            style={{ direction: "ltr" }}
+          >
+            {/* {
                         services.map((item, index) => (
                             <div
                                 className="flex flex-col justify-center items-center transition-all duration-200 m-4 rounded-xl border-2 border-red82OP hover:cursor-pointer hover:bg-pinkF5"
@@ -154,295 +154,16 @@ if (!isMobile){
                             </div>
                         ))
                     } */}
-          <Games
-            selectedGames={selectedGames}
-            gameId={gameId}
-            chooseGame={chooseGame}
-          />
-        </div>
-        {/* filters */}
-    {gameId != 6 && <div className="flex mx-2 my-4 justify-center">
-      <div className="flex items-center ">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="40"
-          height="40"
-          viewBox="0 0 14.378 14.378"
-        >
-          <g
-            id="vuesax_linear_filter-tick"
-            data-name="vuesax/linear/filter-tick"
-            transform="translate(-620 -700)"
-          >
-            <g id="filter-tick" transform="translate(620 700)">
-              <path
-                id="Vector"
-                d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
-                transform="translate(7.267 5.991)"
-                fill="none"
-                stroke="#696969"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="0.6"
-              />
-              <path
-                id="Vector-2"
-                data-name="Vector"
-                d="M0,.7l.7.7L2.217,0"
-                transform="translate(9.004 8.136)"
-                fill="none"
-                stroke="#696969"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="0.6"
-              />
-              <path
-                id="Vector-3"
-                data-name="Vector"
-                d="M0,0H14.378V14.378H0Z"
-                transform="translate(14.378 14.378) rotate(180)"
-                fill="none"
-                opacity="0"
-              />
-              <g id="Group" transform="translate(1.983 1.198)">
-                <path
-                  id="Vector-4"
-                  data-name="Vector"
-                  d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
-                  fill="none"
-                  stroke="#696969"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="0.6"
-                />
-              </g>
-            </g>
-          </g>
-        </svg>
-      </div>
-      <div className="flex items-center  mx-4 pl-6 border-l-2 border-gray-300">
-        <div
-          className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
-                      hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                    ${
-                      filterCheck[0]
-                        ? "border-red52 text-red52 bg-pinkF5"
-                        : "border-gray200 text-gray-400"
-                    }`}
-          onClick={(prevState) =>
-            setFilterCheck([
-              ...prevState,
-              (filterCheck[0] = !filterCheck[0]),
-            ])
-          }
-        >
-          <h3>آنلاین</h3>
-          {filterCheck[0] && (
-            <div className="flex w-full" style={{ direction: "ltr" }}>
-              <div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
-                <svg
-                  width="37"
-                  height="37"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.75 12L10.58 14.83L16.25 9.17004"
-                    stroke="#fff"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-            </div>
-
-            
-          )}
-        </div>
-        <div
-          className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
-                      hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                    ${
-                      filterCheck[0]
-                        ? "border-red52 text-red52 bg-pinkF5"
-                        : "border-gray200 text-gray-400"
-                    }`}
-          onClick={(prevState) =>
-            setFilterCheck([
-              ...prevState,
-              (filterCheck[0] = !filterCheck[0]),
-            ])
-          }
-        >
-          <h3>حضوری</h3>
-          {filterCheck[0] && (
-            <div className="flex w-full" style={{ direction: "ltr" }}>
-              <div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
-                <svg
-                  width="37"
-                  height="37"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.75 12L10.58 14.83L16.25 9.17004"
-                    stroke="#fff"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-            </div>
-
-            
-          )}
-        </div>
-      </div>
-      
-      
-      <div className="flex items-center mx-4 pl-6">
-        <select className="bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52">
-          {services.map((item, index) => (
-            <option key={`Grade__${index}`}>{item.title}</option>
-          ))}
-        </select>
-      </div>
-    </div>}
-
-        <div
-          className={`flex ${
-            gameId == 2 && "flex-col"
-          }  items-center w-full justify-center flex-wrap `}
-        >
-          {books?.map((product, index) => (
-            <div
-              //  to={"/class/" + product?.id}
-              
-              key={`PRODUCT__${gameId}__${index}`}
-              onClick={() => {
-                setPopUpContent({
-                  id: gameId,
-                  title: product?.name,
-                  video: "",
-                  teacher: product?.vodTeacher,
-                  description:
-                    "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
-                  price: product?.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
-                    },
-                  ]
-                });
-                if(gameId !== 2){
-                  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?.price}
-                // productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
-                numberOfRegards={160}
-                productHolderBorder=""
-                productHolderHoverBorder="shadow-md"
-                teacher={product.vodTeacher}
-                catId={gameId}
-                onClick={() => null}
-                btnOnClick={() =>{
-                  pushToCart({
-                    productId: product?.id,
-                    
-                    count: 1,
-                  });
-                  setTimeout(() => setPopUp(false), 1)
-                  console.log(popup)
-                  console.log(product.id)
-                }
-                }
-              />
-            </div>
-          ))}
-          {
-            gameId == 6 &&  
-            <div className="w-3/4 p-8 py-10 flex mt-10 justify-between items-center border-2 rounded-xl border-red52 " >
-
-              <div className="w-1/5">
-                <h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
-                <p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
-                </div>
-                <div className="flex">
-                  <input 
-                  placeholder="12,000,000"
-                  className="border border-red52 rounded-lg h-12 w-36 text-center rounded-l-none border-l-0 px-4 outline-none"
-                  /><p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-r-none border-r-0 px-4">ریال</p>
-                </div> 
-                <div className="flex">
-                <p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-l-none border-l-0 px-10">بابت</p>
-                  <input 
-                  placeholder="شارژ حساب"
-                  className="border border-red52 rounded-lg h-12 w-60 text-center rounded-r-none border-r-0 px-4 outline-none"
-                  />
-                </div>  
-                <button className="cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12">افزودن به اعتبار</button>
-
-            </div>
-          }
-        </div>
-      </div>
-      {!isMobile && <div className="w-1/4 fixed left-0" style={{ height: "100vh" }}>
-        <ShoppingCart />
-      </div> }
-    </div>
-  );}
-  // Mobile Version
-  else{
-    return(
-    <div className="flex flex-col items-center mt-16 mb-40 rtl">
-
-      <Games
-            selectedGames={selectedGames}
-            gameId={gameId}
-            chooseGame={chooseGame}
-          />
-          <div className="w-11/12 border-b border-gray-200"></div>
-
-          {
-            gameId !== 6 && <div className="flex items-center  mx-4 my-4">
-            <svg
+            <Games
+              selectedGames={selectedGames}
+              gameId={gameId}
+              chooseGame={chooseGame}
+            />
+          </div>
+          {/* filters */}
+          {gameId != 6 && <div className="flex mx-2 my-4 justify-center">
+            <div className="flex items-center ">
+              <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="40"
                 height="40"
@@ -498,14 +219,15 @@ if (!isMobile){
                   </g>
                 </g>
               </svg>
+            </div>
+            <div className="flex items-center  mx-4 pl-6 border-l-2 border-gray-300">
               <div
                 className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
-                           hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                          ${
-                            filterCheck[0]
-                              ? "border-red52 text-red52 bg-pinkF5"
-                              : "border-gray200 text-gray-400"
-                          }`}
+                      hover:border-red52 hover:text-red52 hover:bg-pinkF5 
+                    ${filterCheck[0]
+                    ? "border-red52 text-red52 bg-pinkF5"
+                    : "border-gray200 text-gray-400"
+                  }`}
                 onClick={(prevState) =>
                   setFilterCheck([
                     ...prevState,
@@ -534,18 +256,17 @@ if (!isMobile){
                       </svg>
                     </div>
                   </div>
-  
-                  
+
+
                 )}
               </div>
               <div
                 className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
-                           hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                          ${
-                            filterCheck[1]
-                              ? "border-red52 text-red52 bg-pinkF5"
-                              : "border-gray200 text-gray-400"
-                          }`}
+                      hover:border-red52 hover:text-red52 hover:bg-pinkF5 
+                    ${filterCheck[0]
+                    ? "border-red52 text-red52 bg-pinkF5"
+                    : "border-gray200 text-gray-400"
+                  }`}
                 onClick={(prevState) =>
                   setFilterCheck([
                     ...prevState,
@@ -574,15 +295,290 @@ if (!isMobile){
                       </svg>
                     </div>
                   </div>
-  
-                  
+
+
                 )}
               </div>
             </div>
-          }
-          <div className="w-11/12 border-b border-gray-200"></div>
+
+
+            <div className="flex items-center mx-4 pl-6">
+              <select className="bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52">
+                {services.map((item, index) => (
+                  <option key={`Grade__${index}`}>{item.title}</option>
+                ))}
+              </select>
+            </div>
+          </div>}
 
           <div
+            className={`flex 
+              }  items-center w-full justify-center overflow-x-hidden overflow-scroll flex-wrap h-full `}
+          >
+            {books?.map((product, index) => (
+              <div
+                //  to={"/class/" + product?.id}
+
+                key={`PRODUCT__${gameId}__${index}`}
+                onClick={() => {
+                  setPopUpContent({
+                    id: gameId,
+                    title: product?.name,
+                    video: "",
+                    teacher: product?.vodTeacher,
+                    description:
+                      "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
+                    price: product?.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
+                      },
+                    ]
+                  });
+                  if (gameId !== 2) {
+                    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?.price}
+                  // productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                  numberOfRegards={160}
+                  productHolderBorder=""
+                  productHolderHoverBorder="shadow-md"
+                  teacher={product.vodTeacher}
+                  catId={gameId}
+                  onClick={() => null}
+                  btnOnClick={() => {
+                    pushToCart({
+                      productId: product?.id,
+
+                      count: 1,
+                    });
+                    setTimeout(() => setPopUp(false), 1)
+                    console.log(popup)
+                    console.log(product.id)
+                  }
+                  }
+                />
+              </div>
+            ))}
+            {
+              gameId == 6 &&
+              <div className="w-3/4 p-8 py-10 flex mt-10 justify-between items-center border-2 rounded-xl border-red52 " >
+
+                <div className="w-1/5">
+                  <h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
+                  <p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
+                </div>
+                <div className="flex">
+                  <input
+                    placeholder="12,000,000"
+                    className="border border-red52 rounded-lg h-12 w-36 text-center rounded-l-none border-l-0 px-4 outline-none"
+                  /><p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-r-none border-r-0 px-4">ریال</p>
+                </div>
+                <div className="flex">
+                  <p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-l-none border-l-0 px-10">بابت</p>
+                  <input
+                    placeholder="شارژ حساب"
+                    className="border border-red52 rounded-lg h-12 w-60 text-center rounded-r-none border-r-0 px-4 outline-none"
+                  />
+                </div>
+                <button className="cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12">افزودن به اعتبار</button>
+
+              </div>
+            }
+          </div>
+        </div>
+        {!isMobile && <div className="w-1/4 left-0" style={{ height: "100vh" }}>
+          <ShoppingCart />
+        </div>}
+      </div>
+    );
+  }
+  // Mobile Version
+  else {
+    return (
+      <div className="flex flex-col items-center mt-16 mb-40 rtl">
+
+        <Games
+          selectedGames={selectedGames}
+          gameId={gameId}
+          chooseGame={chooseGame}
+        />
+        <div className="w-11/12 border-b border-gray-200"></div>
+
+        {
+          gameId !== 6 && <div className="flex items-center  mx-4 my-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="40"
+              height="40"
+              viewBox="0 0 14.378 14.378"
+            >
+              <g
+                id="vuesax_linear_filter-tick"
+                data-name="vuesax/linear/filter-tick"
+                transform="translate(-620 -700)"
+              >
+                <g id="filter-tick" transform="translate(620 700)">
+                  <path
+                    id="Vector"
+                    d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
+                    transform="translate(7.267 5.991)"
+                    fill="none"
+                    stroke="#696969"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="0.6"
+                  />
+                  <path
+                    id="Vector-2"
+                    data-name="Vector"
+                    d="M0,.7l.7.7L2.217,0"
+                    transform="translate(9.004 8.136)"
+                    fill="none"
+                    stroke="#696969"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="0.6"
+                  />
+                  <path
+                    id="Vector-3"
+                    data-name="Vector"
+                    d="M0,0H14.378V14.378H0Z"
+                    transform="translate(14.378 14.378) rotate(180)"
+                    fill="none"
+                    opacity="0"
+                  />
+                  <g id="Group" transform="translate(1.983 1.198)">
+                    <path
+                      id="Vector-4"
+                      data-name="Vector"
+                      d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
+                      fill="none"
+                      stroke="#696969"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="0.6"
+                    />
+                  </g>
+                </g>
+              </g>
+            </svg>
+            <div
+              className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
+                           hover:border-red52 hover:text-red52 hover:bg-pinkF5 
+                          ${filterCheck[0]
+                  ? "border-red52 text-red52 bg-pinkF5"
+                  : "border-gray200 text-gray-400"
+                }`}
+              onClick={(prevState) =>
+                setFilterCheck([
+                  ...prevState,
+                  (filterCheck[0] = !filterCheck[0]),
+                ])
+              }
+            >
+              <h3>آنلاین</h3>
+              {filterCheck[0] && (
+                <div className="flex w-full" style={{ direction: "ltr" }}>
+                  <div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
+                    <svg
+                      width="37"
+                      height="37"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7.75 12L10.58 14.83L16.25 9.17004"
+                        stroke="#fff"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+
+
+              )}
+            </div>
+            <div
+              className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
+                           hover:border-red52 hover:text-red52 hover:bg-pinkF5 
+                          ${filterCheck[1]
+                  ? "border-red52 text-red52 bg-pinkF5"
+                  : "border-gray200 text-gray-400"
+                }`}
+              onClick={(prevState) =>
+                setFilterCheck([
+                  ...prevState,
+                  (filterCheck[0] = !filterCheck[0]),
+                ])
+              }
+            >
+              <h3>حضوری</h3>
+              {filterCheck[0] && (
+                <div className="flex w-full" style={{ direction: "ltr" }}>
+                  <div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
+                    <svg
+                      width="37"
+                      height="37"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7.75 12L10.58 14.83L16.25 9.17004"
+                        stroke="#fff"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+
+
+              )}
+            </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) => (
@@ -602,7 +598,7 @@ if (!isMobile){
                   classHour: 21,
                   classMinute: 56,
                   image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
-                  examCont : [
+                  examCont: [
                     {
                       title: 'بخش اول آزمون ' + product.name,
                       date: '۱۴۰۰/۱۲/۱۳',
@@ -651,42 +647,42 @@ if (!isMobile){
                     // userId: product?.userId,
                     count: 1,
                   })
-                  
-                  
+
+
                 }
               />
             </Link>
           ))}
           {
-            gameId == 6 &&  
+            gameId == 6 &&
             <div className="w-full p-8 py-10 flex flex-col  justify-between items-center  " >
 
               <div className="w-full text-right mb-4">
                 <h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
                 <p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
-                </div>
-                <div className="flex w-full mb-4">
-                  <input 
+              </div>
+              <div className="flex w-full mb-4">
+                <input
                   placeholder="12,000,000"
                   className="border border-red5B rounded-lg h-14 w-3/4 text-center rounded-l-none border-l-0 px-4 outline-none"
-                  /><p className="border flex justify-center items-center border-red5B rounded-lg h-14 w-1/4 text-center rounded-r-none border-r-0 px-4">ریال</p>
-                </div> 
-                <div className="flex w-full mb-4">
+                /><p className="border flex justify-center items-center border-red5B rounded-lg h-14 w-1/4 text-center rounded-r-none border-r-0 px-4">ریال</p>
+              </div>
+              <div className="flex w-full mb-4">
                 <p className="border flex justify-center items-center border-red52 rounded-lg h-14 w-1/5 text-center rounded-l-none border-l-0 px-10">بابت</p>
-                  <input 
+                <input
                   placeholder="شارژ حساب"
                   className="border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none"
-                  />
-                </div>  
-                <button className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
-                 style={{background: 'rgba(211, 246, 255, 0.44)'}}>
-                   افزودن به سبد خرید
-                   </button>
+                />
+              </div>
+              <button className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
+                style={{ background: 'rgba(211, 246, 255, 0.44)' }}>
+                افزودن به سبد خرید
+              </button>
 
             </div>
           }
-</div>
-    </div>
+        </div>
+      </div>
     )
   }