Sheet

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/base-vega/components/example"
5import { Button } from "@/registry/base-vega/ui/button"
6import { Field, FieldGroup, FieldLabel } from "@/registry/base-vega/ui/field"
7import { Input } from "@/registry/base-vega/ui/input"
8import {
9  Sheet,
10  SheetClose,
11  SheetContent,
12  SheetDescription,
13  SheetFooter,
14  SheetHeader,
15  SheetTitle,
16  SheetTrigger,
17} from "@/registry/base-vega/ui/sheet"
18 
19export default function SheetExample() {
20  return (
21    <ExampleWrapper>
22      <SheetWithForm />
23      <SheetNoCloseButton />
24      <SheetWithSides />
25    </ExampleWrapper>
26  )
27}
28 
29function SheetWithForm() {
30  return (
31    <Example title="With Form">
32      <Sheet>
33        <SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
34        <SheetContent>
35          <SheetHeader>
36            <SheetTitle>Edit profile</SheetTitle>
37            <SheetDescription>
38              Make changes to your profile here. Click save when you&apos;re
39              done.
40            </SheetDescription>
41          </SheetHeader>
42          <div className="style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6">
43            <FieldGroup>
44              <Field>
45                <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
46                <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
47              </Field>
48              <Field>
49                <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel>
50                <Input id="sheet-demo-username" defaultValue="@peduarte" />
51              </Field>
52            </FieldGroup>
53          </div>
54          <SheetFooter>
55            <Button type="submit">Save changes</Button>
56            <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
57          </SheetFooter>
58        </SheetContent>
59      </Sheet>
60    </Example>
61  )
62}
63 
64function SheetNoCloseButton() {
65  return (
66    <Example title="No Close Button">
67      <Sheet>
68        <SheetTrigger render={<Button variant="outline" />}>
69          No Close Button
70        </SheetTrigger>
71        <SheetContent showCloseButton={false}>
72          <SheetHeader>
73            <SheetTitle>No Close Button</SheetTitle>
74            <SheetDescription>
75              This sheet doesn&apos;t have a close button in the top-right
76              corner. You can only close it using the button below.
77            </SheetDescription>
78          </SheetHeader>
79        </SheetContent>
80// … truncated