Dropdown Menu

import * as React from "react";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/layro-dropdown-menu";
import { Copy, Download, MoreHorizontal, Send, Trash2 } from "lucide-react";

/* The "…" menu: actions with icons and shortcuts, a checkbox item for a
   view option, and a destructive item that looks like one. Fully
   keyboard-driven; type a letter to jump. */

export default function DropdownMenuDemo() {
  const [showTax, setShowTax] = React.useState(true);
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 420 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Invoice</h2>
        <div className="mb-5" />
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="text-[13.5px] font-medium tabular-nums">INV-2026-0914</p>
            <p className="text-[12px] text-muted-foreground">Northwind Studio · $89.00</p>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button type="button" aria-label="Invoice actions" className="grid size-9 place-items-center rounded-[10px] [corner-shape:squircle] ring-1 ring-inset ring-border outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"><MoreHorizontal className="size-4" /></button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuLabel>INV-2026-0914</DropdownMenuLabel>
              <DropdownMenuItem shortcut="⌘D"><Copy /> Duplicate</DropdownMenuItem>
              <DropdownMenuItem shortcut="⌘S"><Download /> Download PDF</DropdownMenuItem>
              <DropdownMenuItem><Send /> Email to customer</DropdownMenuItem>
              <DropdownMenuCheckboxItem checked={showTax} onCheckedChange={setShowTax}>Show tax column</DropdownMenuCheckboxItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem danger><Trash2 /> Void invoice</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </div>
  );
}