From c865e46367e138fe627a97e64dc67eae74e30925 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Thu, 22 Feb 2024 10:35:01 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20switch=20to=20the?=
 =?UTF-8?q?=20example=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index c1c46f6c..317fe5c2 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -13,10 +13,12 @@ import {
   renderTabs,
   renderVerticalTabs,
 } from './renders/tabs';
+import { Switch } from 'components/shared/Switch';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
   const [dateRange, setDateRange] = useState<Value>();
+  const [switchValue, setSwitchValue] = useState(false);
 
   return (
     <div className="relative h-full min-h-full">
@@ -112,6 +114,28 @@ const Page = () => {
             <h1 className="text-2xl font-bold">Vertical Tabs</h1>
             {renderVerticalTabs()}
           </div>
+
+          <div className="w-full h border border-gray-200 px-20 my-10" />
+
+          {/* Switch */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Switch</h1>
+            <div className="flex flex-col gap-10 items-center justify-center">
+              <Switch
+                label="Label"
+                checked={switchValue}
+                onCheckedChange={setSwitchValue}
+              />
+              <Switch
+                label="Label"
+                description="Additional information or context"
+                checked={switchValue}
+                onCheckedChange={setSwitchValue}
+              />
+              <Switch disabled label="Disabled unchecked" />
+              <Switch disabled checked label="Disabled checked" />
+            </div>
+          </div>
         </div>
       </div>
     </div>