| import { useEffect } from "react"; |
|
|
| type Props = { |
| onClose: () => void; |
| }; |
|
|
| const rows = [ |
| ["1–6", "Jump to MLP … VLM in learning order"], |
| ["← →", "Previous / next architecture (in detail view)"], |
| ["Esc", "Close detail view or this help"], |
| ["?", "Toggle this shortcut list"], |
| ]; |
|
|
| export function HelpOverlay({ onClose }: Props) { |
| useEffect(() => { |
| const onKey = (event: KeyboardEvent) => { |
| if (event.key === "Escape") onClose(); |
| }; |
| window.addEventListener("keydown", onKey); |
| return () => window.removeEventListener("keydown", onKey); |
| }, [onClose]); |
|
|
| return ( |
| <div |
| role="dialog" |
| aria-modal="true" |
| aria-labelledby="help-title" |
| className="fixed inset-0 z-[60] flex items-end justify-center bg-black/60 p-4 sm:items-center" |
| onClick={onClose} |
| > |
| <div |
| className="w-full max-w-md rounded-xl border border-white/15 bg-[#0e1624] p-5 shadow-2xl" |
| onClick={(event) => event.stopPropagation()} |
| > |
| <h2 id="help-title" className="text-lg font-semibold text-white"> |
| Keyboard shortcuts |
| </h2> |
| <ul className="mt-4 space-y-2"> |
| {rows.map(([key, label]) => ( |
| <li key={key} className="flex items-center justify-between gap-3 text-sm"> |
| <span className="text-slate-300">{label}</span> |
| <kbd className="kbd">{key}</kbd> |
| </li> |
| ))} |
| </ul> |
| <button |
| type="button" |
| onClick={onClose} |
| className="mt-5 min-h-11 w-full rounded-md border border-white/15 px-4 py-2.5 text-sm text-slate-100 hover:border-cyan-300/50" |
| > |
| Close |
| </button> |
| </div> |
| </div> |
| ); |
| } |
|
|
