Sheet

npx @smicolon/fasla-ui@latest add sheet

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

export function EditProfile() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Edit profile</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 px-4">
          <Input label="Name" defaultValue="Nadia Rahman" />
          <Input label="Username" defaultValue="nadia.rahman" />
        </div>
        <SheetFooter>
          <Button type="submit">Save changes</Button>
          <SheetClose render={<Button variant="outline" tone="primary" />}>Cancel</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

import { MenuIcon } from "lucide-react"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"

export function NavigationMenu() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="ghost" size="icon-md" aria-label="Menu" />}>
        <MenuIcon />
      </SheetTrigger>
      <SheetContent side="start">
        <SheetHeader>
          <SheetTitle>Fasla</SheetTitle>
          <SheetDescription>Go to any part of your workspace.</SheetDescription>
        </SheetHeader>
        <nav className="grid gap-1 px-4">
          <a href="/">Home</a>
          <a href="/projects">Projects</a>
          <a href="/settings">Settings</a>
        </nav>
      </SheetContent>
    </Sheet>
  )
}

"use client"

import * as React from "react"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function EditProfileAndSave({ onSave }: { onSave: (name: string) => Promise<void> }) {
  const [open, setOpen] = React.useState(false)
  const [name, setName] = React.useState("Nadia Rahman")

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger render={<Button variant="outline" />}>Edit profile</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
        </SheetHeader>
        <div className="px-4">
          <Input label="Name" value={name} onChange={(event) => setName(event.target.value)} />
        </div>
        <SheetFooter>
          <Button
            onClick={async () => {
              await onSave(name)
              setOpen(false)
            }}
          >
            Save changes
          </Button>
          <SheetClose render={<Button variant="outline" tone="primary" />}>Cancel</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}