Sheet

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Edit user</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit user profile</SheetTitle>
          <SheetDescription>Update the user's information below.</SheetDescription>
        </SheetHeader>
        <div className="py-6 space-y-4">
          <Input label="Full name" defaultValue="Ahmad Dani" />
          <Input label="Email" defaultValue="[email protected]" />
        </div>
        <SheetFooter>
          <Button>Save changes</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

<Sheet>
  <SheetTrigger asChild>
    <Button>Edit user</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit user profile</SheetTitle>
      <SheetDescription>Update the user's information below.</SheetDescription>
    </SheetHeader>
    <div className="py-6 space-y-4">
      <Input label="Full name" defaultValue="Ahmad Dani" />
      <Input label="Email" defaultValue="[email protected]" />
    </div>
    <SheetFooter>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="ghost" size="icon"><MenuIcon /></Button>
  </SheetTrigger>
  <SheetContent side="left" size="sm">
    <SheetHeader>
      <SheetTitle>Menu</SheetTitle>
    </SheetHeader>
    {/* nav items */}
  </SheetContent>
</Sheet>