added Switch

components/PieChart/PieChart.tsx

@@ -21,7 +21,10 @@ const PieChart = (props: PieChartProps) => {
   );
 
   return (
-    <div className="bg-gray-300 rounded-full relative overflow-hidden h-[192px] w-[192px] ">
+    <div
+      className="bg-gray-300 rounded-full relative overflow-hidden h-[192px] w-[192px]"
+      style={{ filter: 'drop-shadow( 2px 4px 8px hsl(0deg 0% 0% / 0.4))' }}
+    >
       <div className="absolute top-0 h-1/2 w-full bg-blue-600 origin-[center_bottom] " />
       <div
         className={degreeCircle2}

components/ProgressBar/ProgressBar.tsx

@@ -24,7 +24,10 @@ const ProgressBar = (props: ProgressBarProps) => {
   ]);
 
   return (
-    <div className={barClass()}>
+    <div
+      className={barClass()}
+      style={{ filter: 'drop-shadow( 2px 4px 8px hsl(0deg 0% 0% / 0.15))' }}
+    >
       <div
         className={barProgressClass()}
         style={{ width: `${limitedFillPercentage}%` }}

components/Switch/Switch.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import Switch from './Switch';
+
+const SwitchWithHooks = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  return <Switch value={isEnabled} onChange={setIsEnabled} />;
+};
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  args: {},
+  render: args => {
+    const [isEnabled, setIsEnabled] = useState(args.value);
+
+    return <Switch value={isEnabled} onChange={setIsEnabled} />;
+  },
+};
+
+export const ToggleOn: Story = {
+  args: {
+    value: true,
+  },
+  render: args => {
+    const [isEnabled, setIsEnabled] = useState(args.value);
+
+    return <Switch value={isEnabled} onChange={setIsEnabled} />;
+  },
+};
+
+export const ToggleOff: Story = {
+  args: {
+    value: false,
+  },
+  render: args => {
+    const [isEnabled, setIsEnabled] = useState(args.value);
+
+    return <Switch value={isEnabled} onChange={setIsEnabled} />;
+  },
+};

components/Switch/Switch.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type SwitchProps = {
+  /**
+   *  value of the toggle switch
+   */
+  value: boolean;
+  /**
+   * change handler for the switch
+   */
+  onChange: (value: boolean) => void;
+};
+
+const Switch = (props: SwitchProps) => {
+  const { value = false, onChange } = props;
+
+  return (
+    <button
+      className={cn(
+        'box-content cursor-pointer',
+        'w-[60px] h-[30px] rounded-[1000px] p-1  ',
+        value ? 'bg-blue-500' : 'bg-gray-300'
+      )}
+      style={{ filter: 'drop-shadow( 2px 4px 8px hsl(0deg 0% 0% / 0.15))' }}
+      onClick={() => onChange(!value)}
+    >
+      <span
+        className="block h-full aspect-square rounded-full bg-white"
+        style={{
+          transition: 'transform 300ms',
+          transform: `translateX(${value ? '100%' : '0%'})`,
+          boxShadow: '2px 4px 8px hsl(0deg 0% 0% / 0.1)',
+        }}
+      />
+    </button>
+  );
+};
+
+export default Switch;

components/Switch/index.tsx

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