Sheet

import { Button } from '@/components/ui/button'
import { Field, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'

export default function SheetBasic() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Edit customer</SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit customer</SheetTitle>
          <SheetDescription>Changes apply to future invoices only.</SheetDescription>
        </SheetHeader>
        <Field>
          <FieldLabel>Company name</FieldLabel>
          <Input defaultValue="Northwind Traders" autoComplete="organization" />
        </Field>
        <Field>
          <FieldLabel>Billing email</FieldLabel>
          <Input type="email" defaultValue="ap@northwind.example" autoComplete="email" />
        </Field>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
          <SheetClose render={<Button />}>Save</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}