Sheet containing a form for editing profile information.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
</script>

<template>
  <div class="flex items-center justify-center">
    <Sheet>
      <SheetTrigger as-child>
        <Button variant="outline">With No Close Button</Button>
      </SheetTrigger>
      <SheetContent :show-close-button="false">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
        </SheetHeader>
        <div class="p-4">
          <FieldGroup>
            <Field>
              <FieldLabel for="name">Name</FieldLabel>
              <Input id="name" value="John Doe" />
            </Field>
            <Field>
              <FieldLabel for="username">Username</FieldLabel>
              <Input id="username" value="@john-doe" />
            </Field>
          </FieldGroup>
        </div>
        <SheetFooter>
          <Button type="submit">Save changes</Button>
          <SheetClose as-child>
            <Button variant="outline">Cancel</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  </div>
</template>