Tabs

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

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