Tab Demo

1'use client';
2 
3import React from 'react';
4import { Tabs } from '@/components/azemmur/components/azemmur/tabs';
5import type { TabsDirection } from '@/components/azemmur/components/azemmur/tabs/tabs-context';
6import { TabsVariantProps } from '@/components/azemmur/components/azemmur/tabs/tabs-variants';
7 
8interface TabsDemoProps {
9  intent?: TabsVariantProps['intent'];
10  styling?: TabsVariantProps['styling'];
11  visuals?: TabsVariantProps['visuals'];
12  size?: TabsVariantProps['size'];
13  shape?: TabsVariantProps['shape'];
14  direction?: TabsDirection;
15}
16 
17export default function TabsDemo({
18  direction = 'ltr',
19  intent,
20  styling,
21  visuals,
22  size,
23  shape,
24}: TabsDemoProps) {
25  return (
26    <Tabs
27      defaultValue="profile"
28      intent={intent}
29      visuals={visuals}
30      styling={styling}
31      shape={shape}
32      size={size}
33      direction={direction}
34      className="bg-card border rounded-xl p-4"
35    >
36      <Tabs.List>
37        <Tabs.Trigger
38          value="profile"
39          className="flex-1"
40          triggerClassName="gap-2"
41        >
42          Profile
43        </Tabs.Trigger>
44 
45        <Tabs.Trigger
46          value="notifications"
47          className="flex-1"
48          triggerClassName="gap-2"
49        >
50          Notifications
51        </Tabs.Trigger>
52 
53        <Tabs.Trigger
54          value="security"
55          className="flex-1"
56          triggerClassName="gap-2"
57        >
58          Security
59        </Tabs.Trigger>
60      </Tabs.List>
61 
62      <Tabs.Content>
63        <Tabs.Panel value="profile">
64          <h2 className="text-lg font-semibold">Public Profile</h2>
65          <p className="text-muted-foreground text-sm">
66            Update your bio and avatar.
67          </p>
68        </Tabs.Panel>
69 
70        <Tabs.Panel value="notifications">
71          <h2 className="text-lg font-semibold">Notifications</h2>
72          <p className="text-muted-foreground text-sm">
73            Manage how you receive alerts.
74          </p>
75        </Tabs.Panel>
76 
77        <Tabs.Panel value="security">
78          <h2 className="text-lg font-semibold">Security Settings</h2>
79          <p className="text-muted-foreground text-sm">
80            Two-factor authentication and passwords.
81          </p>
82        </Tabs.Panel>
83      </Tabs.Content>
84    </Tabs>
85  );
86}