Updates

components/elements/Toggle.tsx

@@ -6,6 +6,7 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
     HTMLDivElement
 > & {
     active?: boolean;
+    setActive?: React.Dispatch<React.SetStateAction<boolean>>;
     circleProps?: DetailedHTMLProps<
         HTMLAttributes<HTMLDivElement>,
         HTMLDivElement
@@ -20,24 +21,28 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
 export default function Toggle({
     circleProps,
     active,
+    setActive,
     ...props
 }: TWUI_TOGGLE_PROPS) {
     return (
         <div
             {...props}
             className={twMerge(
-                "flex flex-row items-center w-full max-w-[200px]",
-                "border border-slate-300 border-solid rounded-full",
-                active ? "" : "",
+                "flex flex-row items-center w-[40px] p-[3px] transition-all",
+                "border border-slate-300 dark:border-white/30 border-solid rounded-full",
+                active ? "justify-end" : "justify-start",
                 "twui-toggle-wrapper",
                 props.className
             )}
+            onClick={() => setActive?.(!active)}
         >
             <div
                 {...circleProps}
                 className={twMerge(
-                    "w-20 h-20 rounded-full",
-                    active ? "" : "",
+                    "w-3.5 h-3.5 rounded-full ",
+                    active
+                        ? "bg-blue-600 dark:bg-blue-500"
+                        : "bg-slate-300 dark:bg-white/40",
                     "twui-toggle-circle",
                     circleProps?.className
                 )}