Dropdown menu

// Built on Radix (npm i @radix-ui/react-dropdown-menu): it handles focus,
// arrow keys, typeahead, Escape and outside clicks.
import * as Menu from "@radix-ui/react-dropdown-menu";
import { Archive, ChevronDown, Copy, Download, Mail, Pencil, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";

const item =
  "flex h-8 cursor-pointer select-none items-center gap-2.5 rounded px-2 text-[13.5px] text-fg outline-none data-[highlighted]:bg-surface-2 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-fg-muted";

function Shortcut({ children }: { children: React.ReactNode }) {
  return <kbd className="ml-auto rounded-sm border border-b-2 border-border-strong bg-surface px-1.5 font-mono text-[11px] text-fg-muted">{children}</kbd>;
}

export function InvoiceActions({ number }: { number: string }) {
  return (
    <Menu.Root>
      <Menu.Trigger className="inline-flex h-8 items-center gap-1.5 rounded border border-border-strong bg-bg px-2.5 text-[13px] font-medium text-fg hover:bg-surface data-[state=open]:bg-surface-2">
        Actions <ChevronDown className="size-3.5" aria-hidden />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Content align="start" sideOffset={6}
          className="w-[232px] rounded-lg border border-border bg-bg p-1 text-fg shadow-lg">
          <Menu.Label className="px-2 pb-1 pt-1.5 text-[11.5px] font-medium text-fg-subtle">{number}</Menu.Label>
          <Menu.Item className={item}><Pencil aria-hidden />Edit<Shortcut>E</Shortcut></Menu.Item>
          <Menu.Item className={item}><Copy aria-hidden />Duplicate<Shortcut>⌘D</Shortcut></Menu.Item>
          <Menu.Item className={item}><Download aria-hidden />Download PDF</Menu.Item>
          <Menu.Item className={item}><Mail aria-hidden />Send reminder</Menu.Item>
          <Menu.Separator className="-mx-1 my-1 h-px bg-border" />
          <Menu.Item className={item}><Archive aria-hidden />Archive</Menu.Item>
          <Menu.Item className={cn(item, "text-danger data-[highlighted]:bg-danger-soft [&>svg]:text-danger")}>
            <Trash2 aria-hidden />Delete<Shortcut>⌫</Shortcut>
          </Menu.Item>
        </Menu.Content>
      </Menu.Portal>
    </Menu.Root>
  );
}