Dialog

import { Button } from '@immit/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@immit/ui/dialog'
import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'
 
export function DialogUncontrolled() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Show Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Profile</DialogTitle>
          <DialogDescription>
            This information will be visible to others. Click save when you are
            done.
          </DialogDescription>
        </DialogHeader>
        <div className="flex items-center gap-4">
          <Label htmlFor="name" className="min-w-[90px] text-right">
            Name
          </Label>
          <Input id="name" defaultValue="Elliot Alderson" className="flex-1" />
        </div>
        <div className="flex items-center gap-4">
          <Label htmlFor="handle" className="min-w-[90px] text-right">
            Handle
          </Label>
          <Input id="handle" defaultValue="@rami" className="flex-1" />
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button>Save</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

'use client'
 
import { useState } from 'react'
import { Button } from '@immit/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@immit/ui/dialog'
import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'
 
export function DialogControlled() {
  const [open, setOpen] = useState(false)
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Show Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Profile</DialogTitle>
          <DialogDescription>
            This information will be visible to others. Click save when you are
            done.
          </DialogDescription>
        </DialogHeader>
        <div className="flex items-center gap-4">
          <Label htmlFor="name" className="min-w-[90px] text-right">
            Name
          </Label>
          <Input id="name" defaultValue="Elliot Alderson" className="flex-1" />
        </div>
        <div className="flex items-center gap-4">
          <Label htmlFor="handle" className="min-w-[90px] text-right">
            Handle
          </Label>
          <Input id="handle" defaultValue="@rami" className="flex-1" />
        </div>
        <DialogFooter>
          <Button
            onClick={() => {
              setOpen(false)
            }}
          >
            Save
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}