Mobile Filters Made

src/view/services/index.js

@@ -429,7 +429,7 @@ if (!isMobile){
   // Mobile Version
   else{
     return(
-    <div className="flex flex-col items-center mt-20">
+    <div className="flex flex-col items-center mt-16 rtl">
 
       <Games
             selectedGames={selectedGames}
@@ -438,6 +438,145 @@ if (!isMobile){
           />
           <div className="w-11/12 border-b border-gray-200"></div>
 
+          <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"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="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"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="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"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="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"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="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"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+
+                
+              )}
+            </div>
+          </div>
+          <div className="w-11/12 border-b border-gray-200"></div>
     </div>
     )
   }