HeroUI Dropdown

"use client"

import { EllipsisVertical, FilePlus, Pencil, Trash2 } from "lucide-react"

import {
  Button,
  Description,
  Dropdown,
  Header,
  Kbd,
  Label,
  Separator,
} from "@/components/ui/heroui-dropdown"

export default function Demo() {
  return (
    <div className="flex min-h-[360px] items-center justify-center p-6">
      <Dropdown>
        <Button isIconOnly aria-label="Menu" variant="secondary">
          <EllipsisVertical className="outline-none size-4" />
        </Button>
        <Dropdown.Popover>
          <Dropdown.Menu onAction={(key) => console.log(`Selected: ${key}`)}>
            <Dropdown.Section>
              <Header>Actions</Header>
              <Dropdown.Item id="new-file" textValue="New file">
                <div className="flex h-8 items-start justify-center pt-px">
                  <FilePlus className="size-4 shrink-0 text-muted" />
                </div>
                <div className="flex flex-col">
                  <Label>New file</Label>
                  <Description>Create a new file</Description>
                </div>
                <Kbd className="ms-auto" slot="keyboard" variant="light">
                  <Kbd.Abbr keyValue="command" />
                  <Kbd.Content>N</Kbd.Content>
                </Kbd>
              </Dropdown.Item>
              <Dropdown.Item id="edit-file" textValue="Edit file">
                <div className="flex h-8 items-start justify-center pt-px">
                  <Pencil className="size-4 shrink-0 text-muted" />
                </div>
                <div className="flex flex-col">
                  <Label>Edit file</Label>
                  <Description>Make changes</Description>
                </div>
                <Kbd className="ms-auto" slot="keyboard" variant="light">
                  <Kbd.Abbr keyValue="command" />
                  <Kbd.Content>E</Kbd.Content>
                </Kbd>
              </Dropdown.Item>
            </Dropdown.Section>
            <Separator />
            <Dropdown.Section>
              <Header>Danger zone</Header>
              <Dropdown.Item
                id="delete-file"
                textValue="Delete file"
                variant="danger"
              >
                <div className="flex h-8 items-start justify-center pt-px">
                  <Trash2 className="size-4 shrink-0 text-danger" />
                </div>
                <div className="flex flex-col">
                  <Label>Delete file</Label>
                  <Description>Move to trash</Description>
                </div>
                <Kbd className="ms-auto" slot="keyboard" variant="light">
                  <Kbd.Abbr keyValue="command" />
                  <Kbd.Abbr keyValue="shift" />
                  <Kbd.Content>D</Kbd.Content>
                </Kbd>
              </Dropdown.Item>
            </Dropdown.Section>
          </Dropdown.Menu>
        </Dropdown.Popover>
      </Dropdown>
    </div>
  )
}