feat: update Switch component to support customizable labels and adjust related UI elements

app/components/ui/switch.tsx

@@ -20,6 +20,10 @@ type TSwitchProperties<T extends FieldValues> = {
   labelClassName?: string
   className?: string
   inputClassName?: string
+  options?: {
+    true: string
+    false: string
+  }
 }
 
 export const Switch = <TFormValues extends Record<string, unknown>>(
@@ -34,6 +38,7 @@ export const Switch = <TFormValues extends Record<string, unknown>>(
     labelClassName,
     className,
     inputClassName,
+    options,
   } = properties
 
   const {
@@ -63,13 +68,22 @@ export const Switch = <TFormValues extends Record<string, unknown>>(
                 field.onChange(checked)
               }}
               className={twMerge(
-                'group relative flex h-7 w-14 cursor-pointer rounded-full bg-[#2E2F7C]/10 p-1 shadow transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-[#2E2F7C]/90 data-[focus]:outline-1 data-[focus]:outline-white',
+                'group flex h-7 cursor-pointer items-center rounded-full bg-[#2E2F7C]/10 p-1 shadow transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-[#2E2F7C]/90 data-[focus]:outline-1 data-[focus]:outline-white',
                 inputClassName,
               )}
             >
-              <span
+              <div
+                className={twMerge(
+                  'order-2 text-xs transition duration-200 group-data-[checked]:order-1',
+                  options?.true ? 'w-18' : 'w-8',
+                  field.value ? 'text-white' : 'text-black/80',
+                )}
+              >
+                {field.value ? options?.true : options?.false}
+              </div>
+              <div
                 aria-hidden="true"
-                className="pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-7"
+                className="pointer-events-none order-1 size-5 rounded-full bg-white ring-0 shadow-lg transition duration-200 group-data-[checked]:order-2"
               />
             </HeadlessSwitch>
           </div>