1
import { Dialog } from "./dialog";
2
 
3
const IS_MAC = typeof navigator !== "undefined" && /mac/i.test(navigator.platform);
4
const MOD = IS_MAC ? "\u2318" : "Ctrl";
5
 
6
interface ShortcutGroup {
7
  label: string;
8
  shortcuts: { keys: string; description: string }[];
9
}
10
 
11
const SHORTCUT_GROUPS: ShortcutGroup[] = [
12
  {
13
    label: "General",
14
    shortcuts: [
15
      { keys: `${MOD} K`, description: "Search pages" },
16
      { keys: "/", description: "Insert block (in editor)" },
17
      { keys: "?", description: "Keyboard shortcuts" },
18
      { keys: "Esc", description: "Close dialog / deselect" },
19
    ],
20
  },
21
  {
22
    label: "Editor",
23
    shortcuts: [
24
      { keys: `${MOD} B`, description: "Bold" },
25
      { keys: `${MOD} I`, description: "Italic" },
26
      { keys: `${MOD} U`, description: "Underline" },
27
      { keys: `${MOD} E`, description: "Inline code" },
28
      { keys: `${MOD} Z`, description: "Undo" },
29
      { keys: IS_MAC ? "\u2318 \u21e7 Z" : "Ctrl Shift Z", description: "Redo" },
30
    ],
31
  },
32
];
33
 
34
interface ShortcutHelpProps {
35
  open: boolean;
36
  onClose: () => void;
37
}
38
 
39
export function ShortcutHelp({ open, onClose }: ShortcutHelpProps) {
40
  return (
41
    <Dialog open={open} onClose={onClose} className="w-full max-w-sm p-4">
42
      <h2 className="mb-3 text-sm font-semibold text-zinc-200">Keyboard shortcuts</h2>
43
      <div className="space-y-4">
44
        {SHORTCUT_GROUPS.map((group) => (
45
          <div key={group.label}>
46
            <p className="mb-1.5 text-xs font-semibold uppercase tracking-widest text-zinc-500">{group.label}</p>
47
            <div className="space-y-2">
48
              {group.shortcuts.map((s) => (
49
                <div key={s.keys} className="flex items-center justify-between">
50
                  <span className="text-sm text-zinc-400">{s.description}</span>
51
                  <kbd className="rounded border border-zinc-700 bg-zinc-800 px-1.5 py-0.5 font-mono text-xs text-zinc-400">
52
                    {s.keys}
53
                  </kbd>
54
                </div>
55
              ))}
56
            </div>
57
          </div>
58
        ))}
59
      </div>
60
    </Dialog>
61
  );
62
}