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" />}>Edit profile</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Update your name and photo.
          </DialogDescription>
        </DialogHeader>
        <Input label="Email address" type="email" placeholder="Type here" />
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
          <Button type="submit">Save changes</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 />}>New project</DialogTrigger>
      <DialogContent>
        {step === 1 ? (
          <DialogHeader>
            <DialogTitle>Name your project</DialogTitle>
            <DialogDescription>Step 1 of 3.</DialogDescription>
          </DialogHeader>
        ) : (
          <DialogHeader onBack={() => setStep(1)}>
            <DialogTitle>Pick a workspace</DialogTitle>
            <DialogDescription>Step 2 of 3.</DialogDescription>
          </DialogHeader>
        )}
        {step === 1 ? (
          <Input label="Project name" placeholder="Orbit" />
        ) : (
          <Input label="Workspace name" placeholder="Design team" />
        )}
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
          {step === 1 ? (
            <Button onClick={() => setStep(2)}>Next</Button>
          ) : (
            <DialogClose render={<Button />}>Create project</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" />}>Edit profile</DialogTrigger>
      <DialogContent>
        <form
          className="contents"
          onSubmit={async (event) => {
            event.preventDefault()
            setPending(true)
            try {
              await onSave(email)
              setOpen(false)
            } finally {
              setPending(false)
            }
          }}
        >
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
          </DialogHeader>
          <Input
            label="Email address"
            type="email"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
          />
          <DialogFooter>
            <DialogClose disabled={pending} render={<Button variant="outline" />}>
              Cancel
            </DialogClose>
            <Button type="submit" loading={pending} loadingLabel="Saving">
              Save changes
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}