From a58fde78c423ccc8c54442c89cc48ac36087612b Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 21 Feb 2024 14:24:55 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20vertical=20tabs=20?=
 =?UTF-8?q?to=20the=20example=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 10 ++++++++--
 .../src/pages/components/renders/tabs.tsx     | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 19e3aa73..c1c46f6c 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -8,7 +8,11 @@ import {
 import { avatars, avatarsFallback } from './renders/avatar';
 import { renderBadges } from './renders/badge';
 import { renderButtonIcons, renderButtons } from './renders/button';
-import { renderTabWithBadges, renderTabs } from './renders/tabs';
+import {
+  renderTabWithBadges,
+  renderTabs,
+  renderVerticalTabs,
+} from './renders/tabs';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -101,10 +105,12 @@ const Page = () => {
           {/* Tabs */}
           <div className="flex flex-col gap-10 items-center justify-between">
             <h1 className="text-2xl font-bold">Tabs</h1>
-            <div className="space-y-10">
+            <div className="flex flex-col gap-10 items-center justify-center">
               {renderTabs()}
               {renderTabWithBadges()}
             </div>
+            <h1 className="text-2xl font-bold">Vertical Tabs</h1>
+            {renderVerticalTabs()}
           </div>
         </div>
       </div>
diff --git a/packages/frontend/src/pages/components/renders/tabs.tsx b/packages/frontend/src/pages/components/renders/tabs.tsx
index ab5dbc78..d344317e 100644
--- a/packages/frontend/src/pages/components/renders/tabs.tsx
+++ b/packages/frontend/src/pages/components/renders/tabs.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Tabs } from 'components/shared/Tabs';
 import { Badge } from 'components/shared/Badge';
+import { GlobeIcon } from 'components/shared/CustomIcon';
 
 const tabs = Array.from({ length: 8 });
 
@@ -35,3 +36,21 @@ export const renderTabWithBadges = () => {
     </Tabs>
   );
 };
+
+export const renderVerticalTabs = () => {
+  return (
+    <Tabs defaultValue="A" orientation="vertical">
+      <Tabs.List>
+        {tabs.slice(0, 4).map((_, index) => (
+          <Tabs.Trigger
+            key={index}
+            icon={<GlobeIcon />}
+            value={index.toString()}
+          >
+            Tab item {index}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  );
+};