Menu

"use client";
import * as React from "react";
import { ArrowRightLeft, Ellipsis, Pencil, Pin, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/notchset/button";
import { Menu, MenuGroup, MenuItem, MenuSeparator } from "@/components/ui/notchset/menu";

export default function MenuDemo() {
  const [last, setLast] = React.useState<string | null>(null);
  // The hints the items print are bound here, as an app binds them: E and P, never while typing in a field.
  React.useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement | null;
      if (e.metaKey || e.ctrlKey || e.altKey || e.repeat || t?.closest("input, textarea, select, [contenteditable='true']")) return;
      if (e.key === "e" || e.key === "E") setLast("Editing Airtable");
      else if (e.key === "p" || e.key === "P") setLast("Pinned Airtable");
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);
  return (
    <div className="flex items-center gap-3">
      <Menu
        trigger={
          <Button square aria-label="More actions for Airtable">
            <Ellipsis />
          </Button>
        }
      >
        <MenuItem icon={<Pencil />} shortcut="E" onClick={() => setLast("Editing Airtable")}>
          Edit
        </MenuItem>
        <MenuItem icon={<Pin />} shortcut="P" onClick={() => setLast("Pinned Airtable")}>
          Pin to sidebar
        </MenuItem>
        <MenuSeparator />
        <MenuGroup label="Move to">
          {["Discovery", "Evaluation", "Proposal"].map((k) => (
            <MenuItem key={k} icon={<ArrowRightLeft />} onClick={() => setLast(`Moved to ${k}`)}>
              {k}
            </MenuItem>
          ))}
        </MenuGroup>
        <MenuSeparator />
        <MenuItem icon={<Trash2 />} danger onClick={() => setLast("Delete Airtable…")}>
          Delete Airtable…
        </MenuItem>
      </Menu>
      {last && <span className="text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">{last}</span>}
    </div>
  );
}