Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

export function AccountTabs() {
  return (
    <Card className="w-full max-w-md text-left">
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>Manage your public profile.</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="profile">
          <TabsList>
            <TabsTrigger value="profile">Profile</TabsTrigger>
            <TabsTrigger value="email">Email</TabsTrigger>
          </TabsList>
          <TabsContent value="profile" className="flex flex-col gap-3 pt-3">
            <div className="flex flex-col gap-2">
              <Label htmlFor="tabs-usage-name">Display name</Label>
              <Input id="tabs-usage-name" defaultValue="Sarang Kumar" />
            </div>
            <Button size="sm" className="self-start">
              Save profile
            </Button>
          </TabsContent>
          <TabsContent value="email" className="flex flex-col gap-3 pt-3">
            <div className="flex flex-col gap-2">
              <Label htmlFor="tabs-usage-email">Email</Label>
              <Input
                id="tabs-usage-email"
                type="email"
                defaultValue="sarang@example.com"
              />
            </div>
            <Button size="sm" className="self-start" variant="outline">
              Update email
            </Button>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}