PacketStation/frontend/src/packet/PrintMenu.tsx

import { useId } from "react";
import type { PacketRead } from "../api/types";
import { Sheet } from "../components/Sheet";
import { openPrint, printRows } from "./closeUtil";

/** The print menu: one row per print kind. A row closes the sheet and opens the print dialog on the stamped copy. */
export function PrintMenu({ p, sub, onClose }: { p: PacketRead; sub: string; onClose: () => void }) {
  const base = useId();
  const rows = printRows(p);
  return (
    <Sheet title="Print" sub={sub} onClose={onClose}>
      <div className="ck">
        {rows.map((r) => (
          <button
            key={r.kind}
            type="button"
            className="ck-item prow"
            aria-label={r.label}
            aria-describedby={`${base}-${r.kind}`}
            onClick={() => {
              onClose();
              openPrint(p.id, r.kind);
            }}
          >
            <span className="t">
              <b>{r.label}</b>
              <span className="small muted" id={`${base}-${r.kind}`}>
                {r.desc}
              </span>
            </span>
          </button>
        ))}
      </div>
      <div className="small muted">
        Every printed page is stamped with who printed it and when, plus &quot;verify revision before use&quot;. Printing is recorded.
      </div>
      <div className="sheet-acts start">
        <button className="btn ghost" type="button" onClick={onClose}>
          Cancel
        </button>
      </div>
    </Sheet>
  );
}