Tabs

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
2import React from "react";
3
4export function Example() {
5  return (
6    <Tabs defaultValue="profile">
7      <TabsList className="justify-center">
8        <TabsTrigger value="profile">Profile</TabsTrigger>
9        <TabsTrigger value="settings">Settings</TabsTrigger>
10        <TabsTrigger value="security">Security</TabsTrigger>
11      </TabsList>
12      <TabsContent value="profile">
13        <div>
14          <h3 className="text-lg font-semibold mb-2">User Information</h3>
15          <p className="mb-1">Name: <span className="font-medium">John Doe</span></p>
16          <p className="mb-1">Email: <span className="font-medium">john@example.com</span></p>
17          <p className="mb-1">Membership: <span className="font-medium">Premium</span></p>
18        </div>
19      </TabsContent>
20      <TabsContent value="settings">
21        <div>
22          <h3 className="text-lg font-semibold mb-2">General Settings</h3>
23          <ul className="list-disc pl-5 space-y-1">
24            <li>Notifications: On</li>
25            <li>Theme: Dark</li>
26            <li>Language: English</li>
27          </ul>
28        </div>
29      </TabsContent>
30      <TabsContent value="security">
31        <div>
32          <h3 className="text-lg font-semibold mb-2">Security</h3>
33          <ul className="list-disc pl-5 space-y-1">
34            <li>Two-factor authentication: Active</li>
35            <li>Last login: 2 hours ago</li>
36            <li>Password: Last changed 1 month ago</li>
37          </ul>
38        </div>
39      </TabsContent>
40    </Tabs>
41  );
42}