Filters Done

src/view/services/index.js

@@ -35,7 +35,7 @@ const Services = ({
   pushToCart,
 }) => {
 
-  const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
+  const [filterCheck, setFilterCheck] = useState(null);
   const [filter, setFilter] = useState({
     search: "",
     grade: "",
@@ -161,7 +161,7 @@ const Services = ({
             />
           </div>
           {/* filters */}
-          {gameId != 6 && <div className="flex mx-2 my-4 justify-center">
+          {gameId != 6 && <div className="flex mx-10 my-4 justify-start">
             <div className="flex items-center ">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -224,19 +224,16 @@ const Services = ({
               <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]
+                    ${filterCheck == 'Online'
                     ? "border-red52 text-red52 bg-pinkF5"
                     : "border-gray200 text-gray-400"
                   }`}
                 onClick={(prevState) =>
-                  setFilterCheck([
+                  setFilterCheck('Online')
-                    ...prevState,
-                    (filterCheck[0] = !filterCheck[0]),
-                  ])
                 }
               >
                 <h3>آنلاین</h3>
-                {filterCheck[0] && (
+                {filterCheck == 'Online' && (
                   <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
@@ -261,21 +258,18 @@ const Services = ({
                 )}
               </div>
               <div
-                className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
+                className={`flex w-32 border-2 p-2 mx-2 px-4 justify-center items-center rounded-md cursor-pointer
                       hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                    ${filterCheck[0]
+                    ${filterCheck == 'Physical'
                     ? "border-red52 text-red52 bg-pinkF5"
                     : "border-gray200 text-gray-400"
                   }`}
                 onClick={(prevState) =>
-                  setFilterCheck([
+                  setFilterCheck('Physical')
-                    ...prevState,
-                    (filterCheck[0] = !filterCheck[0]),
-                  ])
                 }
               >
                 <h3>حضوری</h3>
-                {filterCheck[0] && (
+                {filterCheck == 'Physical' && (
                   <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