From 7bb5f9831c84e6359c24bda262c9e3457299d586 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Thu, 22 Feb 2024 02:19:14 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20segmented=20contro?=
 =?UTF-8?q?ls=20component=20to=20example=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 24 ++++++++++
 .../components/renders/segmentedControls.tsx  | 44 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 packages/frontend/src/pages/components/renders/segmentedControls.tsx

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index c1c46f6c..cdc02de8 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -13,10 +13,14 @@ import {
   renderTabs,
   renderVerticalTabs,
 } from './renders/tabs';
+import { SegmentedControls } from 'components/shared/SegmentedControls';
+import { SEGMENTED_CONTROLS_OPTIONS } from './renders/segmentedControls';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
   const [dateRange, setDateRange] = useState<Value>();
+  const [selectedSegmentedControl, setSelectedSegmentedControl] =
+    useState<string>('Test 1');
 
   return (
     <div className="relative h-full min-h-full">
@@ -112,6 +116,26 @@ 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" />
+
+          {/* Segmented Controls */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Segmented Controls</h1>
+            <div className="flex flex-col gap-10">
+              <SegmentedControls
+                options={SEGMENTED_CONTROLS_OPTIONS}
+                value={selectedSegmentedControl}
+                onChange={setSelectedSegmentedControl}
+              />
+              <SegmentedControls
+                size="sm"
+                options={SEGMENTED_CONTROLS_OPTIONS}
+                value={selectedSegmentedControl}
+                onChange={setSelectedSegmentedControl}
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/frontend/src/pages/components/renders/segmentedControls.tsx b/packages/frontend/src/pages/components/renders/segmentedControls.tsx
new file mode 100644
index 00000000..8f4a019f
--- /dev/null
+++ b/packages/frontend/src/pages/components/renders/segmentedControls.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Badge } from 'components/shared/Badge';
+import { SegmentedControlsOption } from 'components/shared/SegmentedControls';
+
+export const SEGMENTED_CONTROLS_OPTIONS: SegmentedControlsOption[] = [
+  { label: 'Test 1', value: 'Test 1' },
+  {
+    label: 'Test 2',
+    value: 'Test 2',
+    leftIcon: (
+      <Badge size="xs" variant="tertiary">
+        1
+      </Badge>
+    ),
+  },
+  {
+    label: 'Test 3',
+    value: 'Test 3',
+    rightIcon: (
+      <Badge size="xs" variant="tertiary">
+        1
+      </Badge>
+    ),
+  },
+  {
+    label: 'Test 4',
+    value: 'Test 4',
+    leftIcon: (
+      <Badge size="xs" variant="tertiary">
+        1
+      </Badge>
+    ),
+    rightIcon: (
+      <Badge size="xs" variant="tertiary">
+        1
+      </Badge>
+    ),
+  },
+  {
+    label: 'Test 5',
+    value: 'Test 5',
+    disabled: true,
+  },
+];