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

---
 .../frontend/src/pages/components/index.tsx   | 24 +++++++++++++++++++
 .../src/pages/components/renders/radio.ts     | 16 +++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 packages/frontend/src/pages/components/renders/radio.ts

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index c1c46f6c..4f26b6db 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -13,10 +13,13 @@ import {
   renderTabs,
   renderVerticalTabs,
 } from './renders/tabs';
+import { RADIO_OPTIONS } from './renders/radio';
+import { Radio } from 'components/shared/Radio';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
   const [dateRange, setDateRange] = useState<Value>();
+  const [selectedRadio, setSelectedRadio] = useState<string>('');
 
   return (
     <div className="relative h-full min-h-full">
@@ -112,6 +115,27 @@ 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" />
+
+          {/* Radio */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Radio</h1>
+            <div className="flex gap-20 items-start">
+              <Radio
+                options={RADIO_OPTIONS}
+                orientation="vertical"
+                value={selectedRadio}
+                onValueChange={setSelectedRadio}
+              />
+              <Radio
+                options={RADIO_OPTIONS}
+                orientation="horizontal"
+                value={selectedRadio}
+                onValueChange={setSelectedRadio}
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/frontend/src/pages/components/renders/radio.ts b/packages/frontend/src/pages/components/renders/radio.ts
new file mode 100644
index 00000000..ff262f66
--- /dev/null
+++ b/packages/frontend/src/pages/components/renders/radio.ts
@@ -0,0 +1,16 @@
+import { RadioOption } from 'components/shared/Radio';
+
+export const RADIO_OPTIONS: RadioOption[] = [
+  {
+    label: 'Label 1',
+    value: '1',
+  },
+  {
+    label: 'Label 2',
+    value: '2',
+  },
+  {
+    label: 'Label 3',
+    value: '3',
+  },
+];