Tabs

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
5import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
6
7export function TabsDemo() {
8  return (
9    <Tabs defaultValue="overview" variant="outline" size="sm">
10      <TabsList>
11        <TabsTrigger value="overview">Overview</TabsTrigger>
12        <TabsTrigger value="models">Models</TabsTrigger>
13        <TabsTrigger value="research">Research</TabsTrigger>
14        <TabsTrigger value="ethics">Ethics</TabsTrigger>
15      </TabsList>
16
17      <TabsContent value="overview">
18        <Card className="border-border shadow-sm">
19          <CardHeader>
20            <CardTitle>AI Overview</CardTitle>
21            <CardDescription>
22              Understand the current landscape of artificial intelligence, trends, and applications
23              across industries.
24            </CardDescription>
25          </CardHeader>
26          <CardContent 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          </CardContent>
36        </Card>
37      </TabsContent>
38
39      <TabsContent value="models">
40        <Card className="border-border shadow-sm">
41          <CardHeader>
42            <CardTitle>AI Models</CardTitle>
43            <CardDescription>
44              Track the performance of different AI models, from NLP and computer vision to
45              reinforcement learning systems.
46            </CardDescription>
47          </CardHeader>
48          <CardContent>
49            <Button onClick={() => alert('Opening model library')} variant="secondary">
50              View Models
51            </Button>
52          </CardContent>
53        </Card>
54      </TabsContent>
55
56      <TabsContent value="research">
57        <Card className="border-border shadow-sm">
58          <CardHeader>
59            <CardTitle>Research & Publications</CardTitle>
60            <CardDescription>
61              Stay up-to-date with the latest research papers, case studies, and breakthroughs in AI
62              technology.
63            </CardDescription>
64          </CardHeader>
65          <CardContent>
66            <Button onClick={() => alert('Browsing research papers')} variant="secondary">
67              Browse Research
68            </Button>
69          </CardContent>
70        </Card>
71      </TabsContent>
72
73      <TabsContent value="ethics">
74        <Card className="border-border shadow-sm">
75          <CardHeader>
76            <CardTitle>Ethics & Governance</CardTitle>
77            <CardDescription>
78              Understand ethical considerations, regulations, and best practices for responsible AI
79              deployment.
80            </CardDescription>
81          </CardHeader>
82          <CardContent 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          </CardContent>
90        </Card>
91      </TabsContent>
92    </Tabs>
93  );
94}