One Dialog

Dialog primitive with 20 variants covering the daliagents.com console surfaces - go-live confirms, Agent Care upsell and cancel, invites, OTP verification, dashboard sharing, and engagement terms for Dali Agents.

Dali AgentsbyLiana Pepanyan

'use client'

import { EllipsisIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field-1'
import { Input } from '@/components/ui/input'

export function Dialog22() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" aria-label="Open menu">
          <EllipsisIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuGroup>
          <Dialog>
            <DialogTrigger asChild>
              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                Rename agent
              </DropdownMenuItem>
            </DialogTrigger>
            <DialogContent className="sm:max-w-md">
              <DialogHeader>
                <DialogTitle>Rename agent</DialogTitle>
                <DialogDescription>
                  Give this agent a name your team will recognize in the Dali
                  console.
                </DialogDescription>
              </DialogHeader>
              <FieldGroup>
                <Field>
                  <FieldLabel htmlFor="dialog-22-name">Agent name</FieldLabel>
                  <Input id="dialog-22-name" defaultValue="Lead capture agent" />
                </Field>
              </FieldGroup>
              <DialogFooter>
                <DialogClose asChild>
                  <Button variant="outline">Cancel</Button>
                </DialogClose>
                <Button>Save</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>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete agent</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default Dialog22