Tabs

1'use client';
2
3import { Badge } from '@/components/ui/badge';
4import { Card } from '@/components/ui/card';
5import { Tabs } from '@/components/ui/tabs';
6
7const summary = [
8  { label: 'Build time', value: '42s' },
9  { label: 'Output size', value: '218 kB' },
10  { label: 'Region', value: 'iad1' },
11  { label: 'Commit', value: '9fk2ax' },
12];
13
14const buildLog = [
15  '14:02:11  Cloning github.com/acme/storefront-api (branch: main)',
16  '14:02:14  Running "pnpm install --frozen-lockfile"',
17  '14:02:38  Running "pnpm build"',
18  '14:02:52  Uploading build output (218 kB)',
19  '14:02:53  Deployment ready',
20];
21
22const envVars = [
23  { key: 'DATABASE_URL', value: 'postgres://••••', scope: 'Production' },
24  { key: 'STRIPE_SECRET_KEY', value: 'sk_live_••••4f2a', scope: 'Production' },
25  { key: 'NEXT_PUBLIC_API_URL', value: 'https://api.acme.dev', scope: 'All' },
26];
27
28export function Default() {
29  return (
30    <Tabs defaultValue="overview" variant="default" size="sm" className="w-full max-w-lg">
31      <Tabs.List>
32        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
33        <Tabs.Trigger value="logs">Build log</Tabs.Trigger>
34        <Tabs.Trigger value="env">Environment</Tabs.Trigger>
35      </Tabs.List>
36
37      <Tabs.Content value="overview">
38        <Card className="border-border shadow-sm">
39          <Card.Header>
40            <Card.Title className="flex items-center gap-2">
41              storefront-api
42              <Badge variant="success">Ready</Badge>
43            </Card.Title>
44            <Card.Description>
45              Deployment dpl_9fk2ax was promoted to production 12 minutes ago.
46            </Card.Description>
47          </Card.Header>
48          <Card.Content>
49            <dl className="grid grid-cols-2 gap-3 text-sm">
50              {summary.map((item) => (
51                <div key={item.label}>
52                  <dt className="text-muted-foreground text-xs">{item.label}</dt>
53                  <dd className="font-medium">{item.value}</dd>
54                </div>
55              ))}
56            </dl>
57          </Card.Content>
58        </Card>
59      </Tabs.Content>
60
61      <Tabs.Content value="logs">
62        <Card className="border-border shadow-sm">
63          <Card.Header>
64            <Card.Title>Build log</Card.Title>
65            <Card.Description>Last 5 lines of the production build.</Card.Description>
66          </Card.Header>
67          <Card.Content>
68            <pre className="bg-muted text-muted-foreground overflow-x-auto rounded-md p-3 font-mono text-xs">
69              {buildLog.join('\n')}
70            </pre>
71          </Card.Content>
72        </Card>
73      </Tabs.Content>
74
75      <Tabs.Content value="env">
76        <Card className="border-border shadow-sm">
77          <Card.Header>
78            <Card.Title>Environment variables</Card.Title>
79            <Card.Description>
80              Values are encrypted and hidden after you save them.
81            </Card.Description>
82          </Card.Header>
83          <Card.Content>
84            <ul className="divide-border divide-y text-sm">
85              {envVars.map((variable) => (
86                <li key={variable.key} className="flex items-center justify-between gap-3 py-2">
87                  <span className="font-mono text-xs font-medium">{variable.key}</span>
88                  <span className="flex items-center gap-2">
89                    <span className="text-muted-foreground font-mono text-xs">
90                      {variable.value}
91                    </span>
92                    <Badge variant="outline">{variable.scope}</Badge>
93                  </span>
94                </li>
95              ))}
96            </ul>
97          </Card.Content>
98        </Card>
99      </Tabs.Content>
100    </Tabs>
101  );
102}

1'use client';
2
3import { Badge } from '@/components/ui/badge';
4import { Card } from '@/components/ui/card';
5import { Tabs } from '@/components/ui/tabs';
6
7const profile = [
8  { label: 'Full name', value: 'Lucia Mendez' },
9  { label: 'Email', value: 'lucia@acmestudio.dev' },
10  { label: 'Role', value: 'Workspace owner' },
11  { label: 'Member since', value: 'Aug 2023' },
12];
13
14const sessions = [
15  { device: 'MacBook Pro, Chrome', location: 'Lisbon, PT', seen: 'Active now' },
16  { device: 'iPhone 15, Safari', location: 'Lisbon, PT', seen: '2h ago' },
17  { device: 'Windows, Firefox', location: 'Berlin, DE', seen: 'Mar 09' },
18];
19
20const alerts = [
21  { title: 'Deploy failures', detail: 'Email and Slack', enabled: true },
22  { title: 'Weekly usage report', detail: 'Email, Mondays at 9:00', enabled: true },
23  { title: 'Comment mentions', detail: 'Slack only', enabled: false },
24];
25
26export function Vertical() {
27  return (
28    <Tabs defaultValue="account" className="flex w-full flex-col gap-4 sm:flex-row">
29      <Tabs.List className="flex h-auto w-full flex-col justify-start sm:w-44">
30        <Tabs.Trigger value="account" className="w-full justify-start">
31          Account
32        </Tabs.Trigger>
33        <Tabs.Trigger value="security" className="w-full justify-start">
34          Security
35        </Tabs.Trigger>
36        <Tabs.Trigger value="notifications" className="w-full justify-start">
37          Notifications
38        </Tabs.Trigger>
39      </Tabs.List>
40
41      <div className="min-w-0 flex-1">
42        <Tabs.Content value="account" className="mt-0">
43          <Card>
44            <Card.Header>
45              <Card.Title>Account</Card.Title>
46              <Card.Description>The details your teammates see.</Card.Description>
47            </Card.Header>
48            <Card.Content>
49              <dl className="divide-border divide-y text-sm">
50                {profile.map((field) => (
51                  <div key={field.label} className="flex justify-between gap-3 py-2">
52                    <dt className="text-muted-foreground">{field.label}</dt>
53                    <dd className="font-medium">{field.value}</dd>
54                  </div>
55                ))}
56              </dl>
57            </Card.Content>
58          </Card>
59        </Tabs.Content>
60
61        <Tabs.Content value="security" className="mt-0">
62          <Card>
63            <Card.Header>
64              <Card.Title className="flex items-center gap-2">
65                Security
66                <Badge variant="success">2FA on</Badge>
67              </Card.Title>
68              <Card.Description>Password last changed on Feb 02.</Card.Description>
69            </Card.Header>
70            <Card.Content>
71              <ul className="divide-border divide-y text-sm">
72                {sessions.map((session) => (
73                  <li key={session.device} className="flex justify-between gap-3 py-2">
74                    <span>
75                      <span className="block font-medium">{session.device}</span>
76                      <span className="text-muted-foreground text-xs">{session.location}</span>
77                    </span>
78                    <span className="text-muted-foreground text-xs">{session.seen}</span>
79                  </li>
80                ))}
81              </ul>
82            </Card.Content>
83          </Card>
84        </Tabs.Content>
85
86        <Tabs.Content value="notifications" className="mt-0">
87          <Card>
88            <Card.Header>
89              <Card.Title>Notifications</Card.Title>
90              <Card.Description>What we send you, and where.</Card.Description>
91            </Card.Header>
92            <Card.Content>
93              <ul className="divide-border divide-y text-sm">
94                {alerts.map((alert) => (
95                  <li key={alert.title} className="flex justify-between gap-3 py-2">
96                    <span>
97                      <span className="block font-medium">{alert.title}</span>
98                      <span className="text-muted-foreground text-xs">{alert.detail}</span>
99                    </span>
100                    <Badge variant={alert.enabled ? 'success' : 'secondary'}>
101                      {alert.enabled ? 'On' : 'Off'}
102                    </Badge>
103                  </li>
104                ))}
105              </ul>
106            </Card.Content>
107          </Card>
108        </Tabs.Content>
109      </div>
110    </Tabs>
111  );
112}