📝 docs: add vertical tabs to the example page

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>

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>
+  );
+};