From ac5147b461eba377c0faff37563f0f84b158842b Mon Sep 17 00:00:00 2001
From: meng <monkeystylle@gmail.com>
Date: Sun, 30 Jun 2024 20:39:39 +0800
Subject: [PATCH] added SwitchButtonGroup

---
 app/globals.css                               |  3 +
 .../SwitchButtonGroup.stories.tsx             | 66 +++++++++++++++++++
 .../SwitchButtonGroup/SwitchButtonGroup.tsx   | 49 ++++++++++++++
 components/SwitchButtonGroup/index.ts         |  1 +
 4 files changed, 119 insertions(+)
 create mode 100644 components/SwitchButtonGroup/SwitchButtonGroup.stories.tsx
 create mode 100644 components/SwitchButtonGroup/SwitchButtonGroup.tsx
 create mode 100644 components/SwitchButtonGroup/index.ts

diff --git a/app/globals.css b/app/globals.css
index 0c0cc65..3be46f1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -138,4 +138,7 @@
 }
 
 @layer utilities {
+  .customBoxShadow {
+    box-shadow: 2px 4px 8px hsl(0deg 0% 0% / 0.25);
+  }
 }
diff --git a/components/SwitchButtonGroup/SwitchButtonGroup.stories.tsx b/components/SwitchButtonGroup/SwitchButtonGroup.stories.tsx
new file mode 100644
index 0000000..da0aea6
--- /dev/null
+++ b/components/SwitchButtonGroup/SwitchButtonGroup.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SwitchButtonGroup from './SwitchButtonGroup';
+import { useState } from 'react';
+
+const meta: Meta<typeof SwitchButtonGroup> = {
+  title: 'Components/SwitchButtonGroup',
+  component: SwitchButtonGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SwitchButtonGroup>;
+
+export const TwoSwitch: Story = {
+  parameters: {},
+  args: {
+    options: ['Monthly', 'Yearly'],
+    activeOption: 'Monthly',
+  },
+  render: args => {
+    //state for option on the ToggleButton
+    const [selectedOption, setSelectedOption] = useState(args.activeOption);
+
+    //handler for toggle button select
+    const handleOptionSelect = (option: string) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <SwitchButtonGroup
+        options={args.options}
+        onOptionSelect={handleOptionSelect}
+        activeOption={selectedOption}
+      />
+    );
+  },
+};
+
+export const ThreeSwitch: Story = {
+  parameters: {},
+  args: {
+    options: ['Monthly', 'Yearly', 'Daily'],
+    activeOption: 'Yearly',
+  },
+  render: args => {
+    //state for option on the ToggleButton
+    const [selectedOption, setSelectedOption] = useState(args.activeOption);
+
+    //handler for toggle button select
+    const handleOptionSelect = (option: string) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <SwitchButtonGroup
+        options={args.options}
+        onOptionSelect={handleOptionSelect}
+        activeOption={selectedOption}
+      />
+    );
+  },
+};
diff --git a/components/SwitchButtonGroup/SwitchButtonGroup.tsx b/components/SwitchButtonGroup/SwitchButtonGroup.tsx
new file mode 100644
index 0000000..5e2f1a1
--- /dev/null
+++ b/components/SwitchButtonGroup/SwitchButtonGroup.tsx
@@ -0,0 +1,49 @@
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+interface SwitchButtonGroupProps {
+  /**
+   * options to display as toggle buttons
+   */
+  options: string[];
+  /**
+   * currently active option
+   */
+  activeOption: string;
+  /**
+   * handler for selecting option
+   */
+  onOptionSelect: (selectedOption: string) => void;
+}
+
+const SwitchButtonGroup = (props: SwitchButtonGroupProps) => {
+  const { options, activeOption, onOptionSelect } = props;
+
+  const switchContainerClass = cn(
+    'flex items-center justify-center ',
+    'rounded-xl w-fit p-1 bg-gray-300 ',
+    'drop-shadow'
+  );
+
+  return (
+    <div className={switchContainerClass}>
+      {options.map(option => (
+        <button
+          className={cn(
+            'flex items-center justify-center ',
+            'text-sm font-semibold p-2 w-fit rounded-lg ',
+            {
+              'bg-blue-500 text-white customBoxShadow': option === activeOption,
+            }
+          )}
+          key={option}
+          onClick={() => onOptionSelect(option)}
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default SwitchButtonGroup;
diff --git a/components/SwitchButtonGroup/index.ts b/components/SwitchButtonGroup/index.ts
new file mode 100644
index 0000000..4227018
--- /dev/null
+++ b/components/SwitchButtonGroup/index.ts
@@ -0,0 +1 @@
+export { default } from './SwitchButtonGroup';