One Dialog

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field-1'
import { Input } from '@/components/ui/input'

export function Dialog02() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Edit profile</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Update your display name and username. Changes apply across your
            Dali console.
          </DialogDescription>
        </DialogHeader>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="dialog-02-name">Display name</FieldLabel>
            <Input id="dialog-02-name" defaultValue="Alex Carter" />
          </Field>
          <Field>
            <FieldLabel htmlFor="dialog-02-username">Username</FieldLabel>
            <Input id="dialog-02-username" defaultValue="alexcarter" />
          </Field>
        </FieldGroup>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
        <a
          href="https://daliagents.com"
          target="_blank"
          rel="noreferrer"
          className="text-muted-foreground/60 hover:text-muted-foreground mx-auto text-[10px] tracking-wide transition-colors"
        >
          daliagents.com
        </a>
      </DialogContent>
    </Dialog>
  )
}

export default Dialog02