From 4397dfb1c5dd4494f0b65c5cc80a51947d5552b4 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Wed, 4 Sep 2024 12:25:16 -0500
Subject: [PATCH] feat: switch button initial test

---
 .../components/ToggleSwitch.stories.tsx       | 16 +++++++++++
 src/views/components/common/SwitchButton.tsx  | 28 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/stories/components/ToggleSwitch.stories.tsx
 create mode 100644 src/views/components/common/SwitchButton.tsx

diff --git a/src/stories/components/ToggleSwitch.stories.tsx b/src/stories/components/ToggleSwitch.stories.tsx
new file mode 100644
index 00000000..8065427d
--- /dev/null
+++ b/src/stories/components/ToggleSwitch.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SwitchButton from 'src/views/components/common/SwitchButton';
+
+const meta = {
+    title: 'Components/Common/SwitchButton',
+    component: SwitchButton,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+} satisfies Meta<typeof SwitchButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/views/components/common/SwitchButton.tsx b/src/views/components/common/SwitchButton.tsx
new file mode 100644
index 00000000..2ef94cc7
--- /dev/null
+++ b/src/views/components/common/SwitchButton.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Switch } from '@headlessui/react';
+
+interface ToggleSwitchProps {
+    label: string;
+    isChecked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+const SwitchButton: React.FC = () => {
+    const [enabled, setEnabled] = useState(true);
+
+    return (
+        <Switch
+            checked={enabled}
+            onChange={setEnabled}
+            className={`${enabled ? 'bg-[#579D42]' : 'bg-gray-400'} 
+          relative inline-flex items-center h-8 w-12 rounded-full transition-colors ease-in-out duration-200`}
+        >
+            <span
+                className={`${enabled ? 'translate-x-6' : 'translate-x-1'} 
+            inline-block w-6 h-6 transform bg-white rounded-full transition-transform ease-in-out duration-200`}
+            />
+        </Switch>
+    );
+};
+
+export default SwitchButton;