Context menu

import { Button } from "@bosunkit/components/button";
import { ContextMenu, type ContextMenuEntry } from "@bosunkit/components/context-menu";
import { Check, FolderInput, Pencil } from "lucide-react";
import { useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A list of maintenance records. A right click or a long press on a record opens its commands where the crew pressed; " +
  "each record also has an Open button, so no command is reachable only through the menu.";

const RECORDS: readonly (readonly [string, string])[] = [
  ["Impeller service", "Due 14 Nov"],
  ["Anode inspection", "Due 02 Dec"],
  ["Liferaft repack", "Due 20 Mar"],
];

const ROW: CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "var(--space-md)",
  padding: "var(--space-sm) var(--space-md)",
  borderBottom: "1px solid var(--border)",
};

const ENTRIES: readonly ContextMenuEntry[] = [
  { id: "open", label: "Open record", icon: <Pencil size="1em" />, shortcut: "Enter" },
  { id: "complete", label: "Mark complete", icon: <Check size="1em" /> },
  { kind: "separator" },
  { id: "move", label: "Move to another system", icon: <FolderInput size="1em" />, disabled: true },
];

export default function Showcase(): ReactElement {
  const [last, setLast]: [string, Dispatch<SetStateAction<string>>] = useState<string>("Nothing chosen yet");
  return (
    <div style={{ width: "100%", maxWidth: 480 }}>
      {RECORDS.map(([title, due]: readonly [string, string]): ReactElement => (
        <ContextMenu
          key={title}
          entries={ENTRIES}
          label={`${title} actions`}
          onSelect={(id: string): void => {
            setLast(`${title}: ${id}`);
          }}
        >
          <div style={ROW}>
            <span>
              {title} <span style={{ color: "var(--text-dim)" }}>· {due}</span>
            </span>
            <Button
              size="sm"
              variant="ghost"
              onClick={(): void => {
                setLast(`${title}: open`);
              }}
            >
              Open
            </Button>
          </div>
        </ContextMenu>
      ))}
      <p style={{ marginBlock: "var(--space-md) 0", color: "var(--text-dim)", fontSize: "0.85em" }}>
        Right-click or long-press a record. {last}.
      </p>
    </div>
  );
}

import { ContextMenu, type ContextMenuEntry } from "@bosunkit/components/context-menu";
import type { ReactElement } from "react";

export const description: string =
  "A ship log entry's menu with a named group and a submenu: the right arrow opens the submenu, Left or Escape closes it.";

const ENTRIES: readonly ContextMenuEntry[] = [
  { id: "edit", label: "Edit entry" },
  {
    kind: "group",
    id: "mark",
    label: "Mark as",
    entries: [
      { id: "watch-change", label: "Watch change" },
      { id: "position-fix", label: "Position fix" },
    ],
  },
  { kind: "separator" },
  {
    kind: "submenu",
    id: "copy",
    label: "Copy as",
    entries: [
      { id: "copy-text", label: "Text" },
      { id: "copy-csv", label: "CSV row" },
    ],
  },
];

export default function GroupsAndSubmenus(): ReactElement {
  return (
    <ContextMenu entries={ENTRIES} label="Log entry actions" onSelect={(): void => undefined}>
      <div
        style={{
          width: "100%",
          maxWidth: 420,
          padding: "var(--space-md)",
          border: "1px solid var(--border)",
          borderRadius: "var(--radius-md)",
          fontFamily: "var(--font-mono)",
        }}
      >
        21:04 · Wind NW 14 kn, 1012 hPa, all well. Right-click or long-press this entry.
      </div>
    </ContextMenu>
  );
}