Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 2x 11x 11x 11x 4x 3x 176x | import { useRef } from "react";
import { useFocusTrap } from "../hooks";
import { XIcon } from "./Icons";
interface ShortcutsHelpProps {
onClose: () => void;
}
const shortcuts = [
{ key: "j / ↓", desc: "Next message" },
{ key: "k / ↑", desc: "Previous message" },
{ key: "Enter", desc: "Open message" },
{ key: "Escape", desc: "Close / go back" },
{ key: "r", desc: "Reply" },
{ key: "a", desc: "Reply all" },
{ key: "f", desc: "Forward" },
{ key: "c", desc: "Compose new" },
{ key: "s", desc: "Star / unstar message" },
{ key: "u", desc: "Toggle read / unread" },
{ key: "d", desc: "Delete message" },
{ key: "e", desc: "Archive message" },
{ key: "x", desc: "Select / deselect message" },
{ key: "/", desc: "Search" },
{ key: "?", desc: "Show shortcuts" },
{ key: "⌘+Enter", desc: "Send message" },
];
export function ShortcutsHelp({ onClose }: ShortcutsHelpProps) {
const dialogRef = useRef<HTMLDivElement>(null);
useFocusTrap(dialogRef);
return (
<div
ref={dialogRef}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
role="dialog"
aria-modal="true"
aria-label="Keyboard shortcuts"
onClick={(e) => {
if (e.target === e.currentTarget) onClose();
}}
onKeyDown={(e) => {
if (e.key === "Escape") onClose();
}}
>
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl p-6 max-w-sm w-full">
<div className="flex items-center justify-between mb-4">
<h3 className="font-semibold text-lg">Keyboard Shortcuts</h3>
<button
type="button"
onClick={onClose}
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 p-0.5"
>
<XIcon className="w-4 h-4" />
</button>
</div>
<div className="space-y-2">
{shortcuts.map((s) => (
<div key={s.key} className="flex items-center justify-between">
<span className="text-sm text-gray-600 dark:text-gray-400">{s.desc}</span>
<kbd className="text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 px-2 py-0.5 rounded font-mono">
{s.key}
</kbd>
</div>
))}
</div>
</div>
</div>
);
}
|