App sheets4

1import { Button } from "@/ui/button";
2import {
3  Sheet,
4  SheetContent,
5  SheetFooter,
6  SheetHeader,
7  SheetTitle,
8  SheetTrigger,
9} from "@/ui/sheet";
10import { Input } from "@/ui/input";
11import { Label } from "@/ui/label";
12import { Checkbox } from "@/ui/checkbox";
13import {
14  Select,
15  SelectContent,
16  SelectItem,
17  SelectTrigger,
18  SelectValue,
19} from "@/ui/select";
20 
21export default function SettingsSheet() {
22  return (
23    <Sheet>
24      <SheetTrigger asChild>
25        <Button variant="outline">Settings</Button>
26      </SheetTrigger>
27      <SheetContent className="flex w-full flex-col sm:max-w-sm">
28        <SheetHeader className="border-b">
29          <SheetTitle>Settings</SheetTitle>
30        </SheetHeader>
31        <div className="flex-1 space-y-8 overflow-y-auto px-4 pb-4">
32          <div className="space-y-4">
33            <h3 className="text-sm font-semibold">Profile</h3>
34            <div className="grid gap-2">
35              <Label htmlFor="name">Name</Label>
36              <Input id="name" placeholder="Your name" />
37            </div>
38            <div className="grid gap-2">
39              <Label htmlFor="email">Email</Label>
40              <Input id="email" type="email" placeholder="you@example.com" />
41            </div>
42          </div>
43          <div className="space-y-4">
44            <h3 className="text-sm font-semibold">Security</h3>
45            <div className="grid gap-2">
46              <Label htmlFor="password">Password</Label>
47              <Input id="password" type="password" placeholder="••••••••" />
48            </div>
49          </div>
50          <div className="space-y-4">
51            <h3 className="text-sm font-semibold">Notifications</h3>
52            <div className="flex items-center gap-2">
53              <Checkbox id="email-alerts" />
54              <Label htmlFor="email-alerts">Email alerts</Label>
55            </div>
56            <div className="flex items-center gap-2">
57              <Checkbox id="sms-alerts" />
58              <Label htmlFor="sms-alerts">SMS alerts</Label>
59            </div>
60            <div className="flex items-center gap-2">
61              <Checkbox id="push-alerts" />
62              <Label htmlFor="push-alerts">Push notifications</Label>
63            </div>
64          </div>
65          <div className="space-y-4">
66            <h3 className="text-sm font-semibold">Billing</h3>
67            <div className="grid gap-2">
68              <Label htmlFor="plan">Plan</Label>
69              <Select>
70// … truncated