Sheet

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