From 57832b0dd4928f6d87a3ccf06855b87d689fc4c3 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Wed, 4 Sep 2024 12:43:08 -0500
Subject: [PATCH] fix: story

---
 src/stories/components/ToggleSwitch.stories.tsx |  6 +++++-
 src/views/components/common/SwitchButton.tsx    | 11 ++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/stories/components/ToggleSwitch.stories.tsx b/src/stories/components/ToggleSwitch.stories.tsx
index 8065427d..c96a87f6 100644
--- a/src/stories/components/ToggleSwitch.stories.tsx
+++ b/src/stories/components/ToggleSwitch.stories.tsx
@@ -13,4 +13,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        isChecked: true, // The SwitchButton will start in the "checked" state
+    },
+};
diff --git a/src/views/components/common/SwitchButton.tsx b/src/views/components/common/SwitchButton.tsx
index ea6926ef..817aa142 100644
--- a/src/views/components/common/SwitchButton.tsx
+++ b/src/views/components/common/SwitchButton.tsx
@@ -1,15 +1,20 @@
 import React, { useState } from 'react';
 import { Switch } from '@headlessui/react';
+import { useEffect } from 'react';
 
 interface ToggleSwitchProps {
-    label: string;
+    // label: string;
     isChecked: boolean;
-    onChange: (checked: boolean) => void;
+    // onChange: (checked: boolean) => void;
 }
 
-const SwitchButton: React.FC = () => {
+const SwitchButton: React.FC<ToggleSwitchProps> = ({ isChecked = true }) => {
     const [enabled, setEnabled] = useState(true);
 
+    useEffect(() => {
+        setEnabled(isChecked);
+    }, [isChecked]);
+
     return (
         <Switch
             checked={enabled}