Sheet

1import {
2  Sheet,
3  SheetClose,
4  SheetContent,
5  SheetDescription,
6  SheetFooter,
7  SheetHeader,
8  SheetTitle,
9  SheetTrigger,
10} from "passport-ui";
11import { Button } from "passport-ui";
12import { Input } from "passport-ui";
13import { Label } from "passport-ui";

1<Sheet>
2  <SheetTrigger asChild>
3    <Button variant="outline">Open Sheet</Button>
4  </SheetTrigger>
5  <SheetContent>
6    <SheetHeader>
7      <SheetTitle>Edit Profile</SheetTitle>
8      <SheetDescription>
9        Make changes to your profile here. Click save when you're done.
10      </SheetDescription>
11    </SheetHeader>
12    <div className="section-container px-4">
13      <div className="meta-container">
14        <Label htmlFor="name">Full Name</Label>
15        <Input id="name" defaultValue="John Doe" />
16      </div>
17      <div className="meta-container">
18        <Label htmlFor="username">Username</Label>
19        <Input id="username" defaultValue="@johndoe" />
20      </div>
21    </div>
22    <SheetFooter>
23      <Button type="submit" variant="primary">Save Changes</Button>
24      <SheetClose asChild>
25        <Button>Cancel</Button>
26      </SheetClose>
27    </SheetFooter>
28  </SheetContent>
29</Sheet>