From abae7a5c22ab944262d66ae897298b008a03c5f1 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 30 Sep 2024 19:50:34 -0500
Subject: [PATCH] feat: switch button (#229)

* fix: font weight added

* fix: change color hex

* fix: change color again

* fix: text-ut-burntorange

* fix: importance (tailwind wise)

* feat: switch button initial test

* feat: look at how this switch goes back and forth very mindful very demure

* fix: story

* feat: using type now

* chore: fix lint

* feat: button custom function prop

* fix: styling

* chore: fix lint error and add JSDoc

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
---
 .../components/ToggleSwitch.stories.tsx       | 20 ++++++++
 src/views/components/common/SwitchButton.tsx  | 47 +++++++++++++++++++
 2 files changed, 67 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 000000000..4df05a196
--- /dev/null
+++ b/src/stories/components/ToggleSwitch.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SwitchButton from '@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 = {
+    args: {
+        isChecked: true,
+    },
+};
diff --git a/src/views/components/common/SwitchButton.tsx b/src/views/components/common/SwitchButton.tsx
new file mode 100644
index 000000000..ab8b4d16e
--- /dev/null
+++ b/src/views/components/common/SwitchButton.tsx
@@ -0,0 +1,47 @@
+import { Switch } from '@headlessui/react';
+import React, { useEffect, useState } from 'react';
+
+type ToggleSwitchProps = {
+    isChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+};
+
+/**
+ * A custom switch button component.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {boolean} [props.isChecked=true] - The initial checked state of the switch button.
+ * @param {Function} props.onChange - The callback function to be called when the switch button is toggled.
+ * @returns {JSX.Element} The rendered SwitchButton component.
+ */
+const SwitchButton = ({ isChecked = true, onChange }: ToggleSwitchProps): JSX.Element => {
+    const [enabled, setEnabled] = useState(isChecked);
+
+    useEffect(() => {
+        setEnabled(isChecked);
+    }, [isChecked]);
+
+    const handleChange = (checked: boolean) => {
+        setEnabled(checked);
+        if (onChange) {
+            onChange(checked);
+        }
+    };
+
+    return (
+        <Switch
+            checked={enabled}
+            onChange={handleChange}
+            className={`${enabled ? 'bg-[#579D42]' : 'bg-gray-400'}
+          relative inline-flex items-center h-8 w-13 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;