feat: switch

src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import Switch from './Switch';
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Primary: Story = {
+  args: {
+    checked: false,
+  },
+  render: (args) => <Switch checked={args.checked} />,
+};

src/components/Switch/Switch.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  Switch as MuiSwitch,
+  SwitchProps as MuiSwitchProps,
+  styled,
+} from '@mui/material';
+
+const SwitchComponent = styled(MuiSwitch)`
+  &.MuiSwitch-root {
+    width: 40px;
+    padding: 11px 2px;
+  }
+  & .MuiSwitch-switchBase {
+    top: 8px;
+    padding: 6.5px;
+    &.Mui-checked {
+      transform: translateX(16px);
+      & + .MuiSwitch-track {
+        opacity: 1;
+      }
+      & .MuiSwitch-thumb {
+        background-color: #fff;
+      }
+    }
+  }
+  & .MuiSwitch-track {
+    width: 38px;
+    height: 20px;
+    border-radius: 10px;
+  }
+  & .MuiSwitch-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 6;
+  }
+`;
+
+const Switch: React.FC<MuiSwitchProps> = (props) => {
+  return <SwitchComponent {...props} />;
+};
+
+export default Switch;

src/components/Switch/index.ts

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

src/components/index.ts

@@ -14,3 +14,4 @@ export { default as SearchTextField } from './TextField/SearchTextField';
 export { default as OrgText } from './OrgText';
 export { default as StatusDropdown } from './Dropdown/StatusDropdown';
 export { default as CheckboxLight } from './Checkbox/CheckboxLight';
+export { default as Switch } from './Switch/Switch';