feat: switch component

.storybook/preview.ts

@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/nextjs-vite'
 
+import "../src/app/globals.css";
+
 const preview: Preview = {
   parameters: {
     controls: {

src/app/components/switch_component.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+
+interface IToggleSwitchProps {
+  initialState?: boolean;
+  size?: "small" | "medium" | "large";
+  onToggle?: (state: boolean) => void;
+}
+
+const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
+  initialState = false,
+  size = "medium",
+  onToggle,
+}) => {
+  const [isOn, setIsOn] = useState(initialState);
+
+  const handleToggle = () => {
+    const newState = !isOn;
+    setIsOn(newState);
+    if (onToggle) {
+      onToggle(newState);
+    }
+  };
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case "small":
+        return "h-5 w-9";
+      case "large":
+        return "h-8 w-14";
+      default:
+        return "h-6 w-11";
+    }
+  };
+
+  const getHandleClasses = () => {
+    switch (size) {
+      case "small":
+        return `h-3 w-3 ${isOn ? "translate-x-5" : "translate-x-1"}`;
+      case "large":
+        return `h-6 w-6 ${isOn ? "translate-x-6" : "translate-x-1"}`;
+      default:
+        return `h-4 w-4 ${isOn ? "translate-x-6" : "translate-x-1"}`;
+    }
+  };
+
+  return (
+    <button
+      onClick={handleToggle}
+      className={`relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out focus:ring-1 focus:ring-orange-300 focus:ring-offset-1 focus:outline-none ${getSizeClasses()} ${
+        isOn ? "bg-orange-500" : "bg-gray-300"
+      }`}
+      role="switch"
+      aria-checked={isOn}
+    >
+      <span className="sr-only">Toggle switch</span>
+      <span
+        className={`inline-block transform rounded-full bg-white shadow-lg transition-transform duration-200 ease-in-out ${getHandleClasses()}`}
+      />
+    </button>
+  );
+};
+
+export default ToggleSwitch;

src/stories/ToggleSwitch.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import ToggleSwitch from '../app/components/switch_component';
+
+const meta = {
+  title: 'Example/ToggleSwitch',
+  component: ToggleSwitch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    initialState: { control: 'boolean' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+  args: { onToggle: fn() },
+} satisfies Meta<typeof ToggleSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Enabled: Story = {
+  args: {
+    initialState: false,
+    size: 'medium',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    initialState: true,
+    size: 'medium',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    initialState: false,
+    size: 'large',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    initialState: true,
+    size: 'small',
+  },
+};