Tabs

1import { Tabs, TabsContent, TabsList, TabsTrigger } from "passport-ui";
2import { Card, CardContent } from "passport-ui";
3import { Home, BarChart3, Settings } from "lucide-react";

1<Tabs defaultValue="overview" className="w-md">
2  <TabsList>
3    <TabsTrigger value="overview" icon={Home}>
4      Overview
5    </TabsTrigger>
6    <TabsTrigger value="analytics" icon={BarChart3}>
7      Analytics
8    </TabsTrigger>
9    <TabsTrigger value="settings" icon={Settings}>
10      Settings
11    </TabsTrigger>
12  </TabsList>
13 
14  <TabsContent value="overview">
15    <Card>
16      <CardContent>
17        <h3 className="text-lg font-semibold">Project Overview</h3>
18        <p className="text-sm text-muted-foreground mt-2">
19          View your project's current status, recent activity, and
20          key metrics all in one place.
21        </p>
22        <div className="mt-4 space-y-2">
23          <div className="flex justify-between text-sm">
24            <span>Active tasks:</span>
25            <span className="font-medium">12</span>
26          </div>
27          <div className="flex justify-between text-sm">
28            <span>Completed:</span>
29            <span className="font-medium">8</span>
30          </div>
31        </div>
32      </CardContent>
33    </Card>
34  </TabsContent>
35 
36  <TabsContent value="analytics">
37    <Card>
38      <CardContent>
39        <h3 className="text-lg font-semibold">Analytics Dashboard</h3>
40        <p className="text-sm text-muted-foreground mt-2">
41          Track performance metrics and growth trends.
42        </p>
43        <div className="mt-4 grid grid-cols-2 gap-4 text-center">
44          <div>
45            <div className="text-2xl font-bold">2.4k</div>
46            <div className="text-xs text-muted-foreground">Users</div>
47          </div>
48          <div>
49            <div className="text-2xl font-bold">18%</div>
50            <div className="text-xs text-muted-foreground">Growth</div>
51          </div>
52        </div>
53      </CardContent>
54    </Card>
55  </TabsContent>
56 
57  <TabsContent value="settings">
58    <Card>
59      <CardContent>
60        <h3 className="text-lg font-semibold">Settings</h3>
61        <p className="text-sm text-muted-foreground mt-2">
62          Configure your preferences and application settings.
63        </p>
64      </CardContent>
65    </Card>
66  </TabsContent>
67</Tabs>