search page + sorting starts

src/components/Switch.tsx

@@ -1,21 +1,26 @@
-import { useState } from "react";
+import { ISwitcher } from "../types/switcher";
 
-const Switch = () => {
-  const [isSwitched, setIsSwitched] = useState(false);
+interface ISwitchProps {
+  switcher: ISwitcher;
+  onClick: (id: string) => void;
+}
+
+const Switch = ({ switcher, onClick }: ISwitchProps) => {
   function handleOnClick() {
-    setIsSwitched((prev) => !prev);
+    // setIsSwitched((prev) => !prev);
+    onClick(switcher.id);
   }
 
   return (
     <div
       className={`w-10 h-6  relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
-        isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
+        switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
       }`}
       onClick={handleOnClick}
     >
       <div
-        className={`w-5 h-5 bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out ${
-          isSwitched ? "top-[2px] left-[18px]" : "top-[2px] left-[2px]"
+        className={`w-5 h-5 bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out top-[2px] ${
+          switcher.isSwitched ? "left-[18px]" : "left-[2px]"
         }`}
       ></div>
     </div>