migration(frontend): migrated frontend files except some components to ts

frontend/components/basic/Toggle.tsx

@@ -1,27 +1,26 @@
-import React from "react";
-import { Switch } from "@headlessui/react";
+import { Switch } from '@headlessui/react';
 
-interface ToggleProps { 
-  enabled: boolean; 
-  setEnabled: (value: boolean) => void; 
-  addOverride: (value: string | undefined, pos: number) => void; 
+interface ToggleProps {
+  enabled: boolean;
+  setEnabled: (value: boolean) => void;
+  addOverride: (value: string | undefined, pos: number) => void;
   pos: number;
 }
 
 /**
  * This is a typical 'iPhone' toggle (e.g., user for overriding secrets with personal values)
- * @param obj 
+ * @param obj
  * @param {boolean} obj.enabled - whether the toggle is turned on or off
  * @param {function} obj.setEnabled - change the state of the toggle
  * @param {function} obj.addOverride - a function that adds an override to a certain secret
  * @param {number} obj.pos - position of a certain secret
- * @returns 
+ * @returns
  */
-export default function Toggle ({ 
-  enabled, 
-  setEnabled, 
-  addOverride, 
-  pos
+export default function Toggle({
+  enabled,
+  setEnabled,
+  addOverride,
+  pos,
 }: ToggleProps): JSX.Element {
   return (
     <Switch
@@ -38,12 +37,12 @@ export default function Toggle ({
         enabled ? 'bg-primary' : 'bg-bunker-400'
       } relative inline-flex h-5 w-9 items-center rounded-full`}
     >
-      <span className="sr-only">Enable notifications</span>
+      <span className='sr-only'>Enable notifications</span>
       <span
         className={`${
           enabled ? 'translate-x-[1.26rem]' : 'translate-x-0.5'
         } inline-block h-3.5 w-3.5 transform rounded-full bg-bunker-800 transition`}
       />
     </Switch>
-  )
+  );
 }