لوحة منزلقة (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" />}>تعديل الملف الشخصي</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>تعديل الملف الشخصي</SheetTitle>
          <SheetDescription>قم بإجراء تغييرات على ملفك الشخصي هنا. انقر حفظ عند الانتهاء.</SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 px-4">
          <Input label="الاسم" defaultValue="نادية رحمن" />
          <Input label="اسم المستخدم" defaultValue="nadia.rahman" />
        </div>
        <SheetFooter>
          <Button type="submit">حفظ التغييرات</Button>
          <SheetClose render={<Button variant="outline" tone="primary" />}>إلغاء</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="القائمة" />}>
        <MenuIcon />
      </SheetTrigger>
      <SheetContent side="start">
        <SheetHeader>
          <SheetTitle>فاصلة</SheetTitle>
          <SheetDescription>انتقل إلى أي جزء من مساحة عملك.</SheetDescription>
        </SheetHeader>
        <nav className="grid gap-1 px-4">
          <a href="/">الرئيسية</a>
          <a href="/projects">المشاريع</a>
          <a href="/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("نادية رحمن")

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger render={<Button variant="outline" />}>تعديل الملف الشخصي</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>تعديل الملف الشخصي</SheetTitle>
          <SheetDescription>قم بإجراء تغييرات على ملفك الشخصي هنا. انقر حفظ عند الانتهاء.</SheetDescription>
        </SheetHeader>
        <div className="px-4">
          <Input label="الاسم" value={name} onChange={(event) => setName(event.target.value)} />
        </div>
        <SheetFooter>
          <Button
            onClick={async () => {
              await onSave(name)
              setOpen(false)
            }}
          >
            حفظ التغييرات
          </Button>
          <SheetClose render={<Button variant="outline" tone="primary" />}>إلغاء</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}