chore: added custom toggle switch everywhere (#949)

apps/app/components/integration/github/import-data.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC } from "react";
 
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
@@ -7,7 +7,7 @@ import useProjects from "hooks/use-projects";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { CustomSearchSelect, PrimaryButton, SecondaryButton } from "components/ui";
+import { CustomSearchSelect, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -107,23 +107,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
               control={control}
               name="sync"
               render={({ field: { value, onChange } }) => (
-                <button
-                  type="button"
-                  className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                    value ? "bg-green-500" : "bg-gray-200"
-                  }`}
-                  role="switch"
-                  aria-checked={value ? true : false}
-                  onClick={() => onChange(!value)}
-                >
-                  <span className="sr-only">Show empty groups</span>
-                  <span
-                    aria-hidden="true"
-                    className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                      value ? "translate-x-2.5" : "translate-x-0"
-                    }`}
-                  />
-                </button>
+                <ToggleSwitch value={value} onChange={() => onChange(!value)} />
               )}
             />
           </div>