نافذة منبثقة (Dialog)

npx @smicolon/fasla-ui@latest add dialog

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function EditProfile() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>تعديل الملف الشخصي</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>تعديل الملف الشخصي</DialogTitle>
          <DialogDescription>
            حدّث اسمك وصورتك.
          </DialogDescription>
        </DialogHeader>
        <Input label="البريد الإلكتروني" type="email" placeholder="اكتب هنا" />
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>إلغاء</DialogClose>
          <Button type="submit">حفظ التغييرات</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

"use client"

import * as React from "react"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function NewProject() {
  const [step, setStep] = React.useState(1)

  return (
    <Dialog onOpenChange={(open) => open && setStep(1)}>
      <DialogTrigger render={<Button />}>مشروع جديد</DialogTrigger>
      <DialogContent>
        {step === 1 ? (
          <DialogHeader>
            <DialogTitle>سمِّ مشروعك</DialogTitle>
            <DialogDescription>الخطوة 1 من 3.</DialogDescription>
          </DialogHeader>
        ) : (
          <DialogHeader onBack={() => setStep(1)}>
            <DialogTitle>اختر مساحة العمل</DialogTitle>
            <DialogDescription>الخطوة 2 من 3.</DialogDescription>
          </DialogHeader>
        )}
        {step === 1 ? (
          <Input label="اسم المشروع" placeholder="مدار" />
        ) : (
          <Input label="اسم مساحة العمل" placeholder="فريق التصميم" />
        )}
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>إلغاء</DialogClose>
          {step === 1 ? (
            <Button onClick={() => setStep(2)}>التالي</Button>
          ) : (
            <DialogClose render={<Button />}>إنشاء المشروع</DialogClose>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

"use client"

import * as React from "react"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function EditProfileAndSave({ onSave }: { onSave: (email: string) => Promise<void> }) {
  const [open, setOpen] = React.useState(false)
  const [pending, setPending] = React.useState(false)
  const [email, setEmail] = React.useState("")

  return (
    <Dialog open={open} onOpenChange={(next) => !pending && setOpen(next)}>
      <DialogTrigger render={<Button variant="outline" />}>تعديل الملف الشخصي</DialogTrigger>
      <DialogContent>
        <form
          className="contents"
          onSubmit={async (event) => {
            event.preventDefault()
            setPending(true)
            try {
              await onSave(email)
              setOpen(false)
            } finally {
              setPending(false)
            }
          }}
        >
          <DialogHeader>
            <DialogTitle>تعديل الملف الشخصي</DialogTitle>
          </DialogHeader>
          <Input
            label="البريد الإلكتروني"
            type="email"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
          />
          <DialogFooter>
            <DialogClose disabled={pending} render={<Button variant="outline" />}>
              إلغاء
            </DialogClose>
            <Button type="submit" loading={pending} loadingLabel="جارٍ الحفظ">
              حفظ التغييرات
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}