Tabs

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Card } from '@/components/ui/card';
5import { Tabs } from '@/components/ui/tabs';
6
7const tabsData = [
8  {
9    value: 'overview',
10    label: 'Overview',
11    title: 'AI Overview',
12    description:
13      'Understand the current landscape of artificial intelligence, trends, and applications across industries.',
14    actions: (
15      <div className="flex gap-3">
16        <Button onClick={() => alert('Viewing AI trends')} variant="secondary">
17          View Trends
18        </Button>
19        <Button variant="ghost" onClick={() => alert('Explore applications')}>
20          Explore Applications
21        </Button>
22      </div>
23    ),
24  },
25  {
26    value: 'models',
27    label: 'Models',
28    title: 'AI Models',
29    description:
30      'Track the performance of different AI models, from NLP and computer vision to reinforcement learning systems.',
31    actions: (
32      <Button onClick={() => alert('Opening model library')} variant="secondary">
33        View Models
34      </Button>
35    ),
36  },
37  {
38    value: 'research',
39    label: 'Research',
40    title: 'Research & Publications',
41    description:
42      'Stay up-to-date with the latest research papers, case studies, and breakthroughs in AI technology.',
43    actions: (
44      <Button onClick={() => alert('Browsing research papers')} variant="secondary">
45        Browse Research
46      </Button>
47    ),
48  },
49  {
50    value: 'ethics',
51    label: 'Ethics',
52    title: 'Ethics & Governance',
53    description:
54      'Understand ethical considerations, regulations, and best practices for responsible AI deployment.',
55    actions: (
56      <div className="flex gap-3">
57        <Button onClick={() => alert('View guidelines')} variant="secondary">
58          View Guidelines
59        </Button>
60        <Button variant="ghost" onClick={() => alert('Report concerns')}>
61          Report Concerns
62        </Button>
63      </div>
64    ),
65  },
66];
67
68export function Default() {
69  return (
70    <Tabs defaultValue="overview" variant="default" size="sm">
71      <Tabs.List>
72        {tabsData.map((tab) => (
73          <Tabs.Trigger key={tab.value} value={tab.value}>
74            {tab.label}
75          </Tabs.Trigger>
76        ))}
77      </Tabs.List>
78
79      {tabsData.map((tab) => (
80        <Tabs.Content key={tab.value} value={tab.value}>
81          <Card className="border-border shadow-sm">
82            <Card.Header>
83              <Card.Title>{tab.title}</Card.Title>
84              <Card.Description>{tab.description}</Card.Description>
85            </Card.Header>
86            <Card.Content>{tab.actions}</Card.Content>
87          </Card>
88        </Tabs.Content>
89      ))}
90    </Tabs>
91  );
92}

1'use client';
2
3import { Card } from '@/components/ui/card';
4import { Tabs } from '@/components/ui/tabs';
5
6const tabs = [
7  {
8    value: 'account',
9    label: 'Account',
10    title: 'Account Settings',
11    description: 'Manage your account settings here.',
12    content: 'This is the account settings tab content.',
13  },
14  {
15    value: 'password',
16    label: 'Password',
17    title: 'Password',
18    description: 'Change your password here.',
19    content: 'This is the password tab content.',
20  },
21  {
22    value: 'notifications',
23    label: 'Notifications',
24    title: 'Notifications',
25    description: 'Manage your notification preferences.',
26    content: 'This is the notifications tab content.',
27  },
28] as const;
29
30export function Vertical() {
31  return (
32    <Tabs defaultValue="account" className="flex flex-col gap-4 sm:flex-row">
33      <Tabs.List className="flex h-auto w-full flex-col justify-start sm:w-48">
34        {tabs.map((tab) => (
35          <Tabs.Trigger key={tab.value} value={tab.value} className="w-full justify-start">
36            {tab.label}
37          </Tabs.Trigger>
38        ))}
39      </Tabs.List>
40      <div className="flex-1">
41        {tabs.map((tab) => (
42          <Tabs.Content key={tab.value} value={tab.value} className="mt-0">
43            <Card>
44              <Card.Header>
45                <Card.Title>{tab.title}</Card.Title>
46                <Card.Description>{tab.description}</Card.Description>
47              </Card.Header>
48              <Card.Content>
49                <div className="space-y-4">
50                  <p className="text-muted-foreground text-sm">{tab.content}</p>
51                </div>
52              </Card.Content>
53            </Card>
54          </Tabs.Content>
55        ))}
56      </div>
57    </Tabs>
58  );
59}