added SwitchButtonGroup

app/globals.css

@@ -138,4 +138,7 @@
 }
 
 @layer utilities {
+  .customBoxShadow {
+    box-shadow: 2px 4px 8px hsl(0deg 0% 0% / 0.25);
+  }
 }

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}
+      />
+    );
+  },
+};

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;

components/SwitchButtonGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './SwitchButtonGroup';