دیالوگ (Dialog)

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button,
  Input,
} from '@parto/ui';

<Dialog>
  <DialogTrigger asChild>
    <Button>باز کردن دیالوگ</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>ویرایش پروفایل</DialogTitle>
      <DialogDescription>اطلاعات خود را ویرایش کرده و ذخیره کنید.</DialogDescription>
    </DialogHeader>
    <div className="space-y-3">
      <Input placeholder="نام کامل" defaultValue="مریم محمدی" />
      <Input placeholder="ایمیل" type="email" defaultValue="maryam@example.com" />
    </div>
    <DialogFooter>
      <Button variant="outline">لغو</Button>
      <Button>ذخیره</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">ویرایش پروفایل</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>ویرایش پروفایل</DialogTitle>
      <DialogDescription>
        تغییرات خود را اعمال کنید و سپس ذخیره کنید.
      </DialogDescription>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      <div className="grid grid-cols-4 items-center gap-4">
        <label htmlFor="name" className="text-end">
          نام
        </label>
        <Input
          id="name"
          defaultValue="علی احمدی"
          className="col-span-3"
        />
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <label htmlFor="username" className="text-end">
          نام کاربری
        </label>
        <Input
          id="username"
          defaultValue="@ali_ahmadi"
          className="col-span-3"
        />
      </div>
    </div>
    <DialogFooter>
      <Button type="submit">ذخیره تغییرات</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

const [open, setOpen] = React.useState(false);

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    {/* محتوا */}
    <Button onClick={() => setOpen(false)}>بستن</Button>
  </DialogContent>
</Dialog>