From d85dcb4d858cfd923723ab334dccf5406588f10d Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Mon, 3 Jun 2024 21:44:56 +0900
Subject: [PATCH] docs: add Switch docs

---
 packages/react/src/App.tsx                    | 11 +++++
 packages/react/src/RouteObject.ts             |  5 +++
 packages/react/src/docs/components/Switch.mdx | 40 +++++++++++++++++++
 .../docs/components/SwitchBlocks/Preview.tsx  |  5 +++
 4 files changed, 61 insertions(+)
 create mode 100644 packages/react/src/docs/components/Switch.mdx
 create mode 100644 packages/react/src/docs/components/SwitchBlocks/Preview.tsx

diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index 1a60154..4ba7358 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -33,6 +33,9 @@ import ComponentsDrawer, {
 import ComponentsLabel, {
   tableOfContents as componentsLabelToc,
 } from "./docs/components/Label.mdx";
+import ComponentsSwitch, {
+  tableOfContents as componentsSwitchToc,
+} from "./docs/components/Switch.mdx";
 import ComponentsTabs, {
   tableOfContents as componentsTabsToc,
 } from "./docs/components/Tabs.mdx";
@@ -191,6 +194,14 @@ const router = createBrowserRouter(
               </DynamicLayout>
             }
           />
+          <Route
+            path="switch"
+            element={
+              <DynamicLayout toc={componentsSwitchToc}>
+                <ComponentsSwitch components={overrideComponents} />
+              </DynamicLayout>
+            }
+          />
           <Route
             path="tabs"
             element={
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
index b750445..d55ee47 100644
--- a/packages/react/src/RouteObject.ts
+++ b/packages/react/src/RouteObject.ts
@@ -55,6 +55,11 @@ export default {
         name: "Label",
         eq: (pathname: string) => pathname === "/docs/components/label"
       },
+      {
+        path: "/docs/components/switch",
+        name: "Switch",
+        eq: (pathname: string) => pathname === "/docs/components/switch"
+      },
       {
         path: "/docs/components/tabs",
         name: "Tabs",
diff --git a/packages/react/src/docs/components/Switch.mdx b/packages/react/src/docs/components/Switch.mdx
new file mode 100644
index 0000000..e60cf3f
--- /dev/null
+++ b/packages/react/src/docs/components/Switch.mdx
@@ -0,0 +1,40 @@
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { SwitchDemo } from "./SwitchBlocks/Preview";
+
+# Switch
+Toggle between two states with a sleek design. Perfect for enabling/disabling options.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <SwitchDemo />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/SwitchBlocks/Preview.tsx`} />
+    </TabContent>
+</TabProvider>
+
+## Installation
+
+1. Create a new file `Switch.tsx` in your component folder.
+2. Copy and paste the following code into the file.
+
+<LoadedCode from={`${GITHUB}/packages/react/components/Switch.tsx`} />
+
+## Usage
+
+```tsx
+import { Switch } from "@components/Switch";
+```
+
+```html
+<Switch />
+```
+
diff --git a/packages/react/src/docs/components/SwitchBlocks/Preview.tsx b/packages/react/src/docs/components/SwitchBlocks/Preview.tsx
new file mode 100644
index 0000000..ccc389b
--- /dev/null
+++ b/packages/react/src/docs/components/SwitchBlocks/Preview.tsx
@@ -0,0 +1,5 @@
+import { Switch } from "@components/Switch";
+
+export function SwitchDemo() {
+  return <Switch />;
+}