Keyboard Shortcuts

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useEffect, useState } from "react";
5import { useHotkeys } from "react-hotkeys-hook";
6 
7type KeyItem = string | { display: string; key: string };
8 
9interface KbdProps {
10  keys: KeyItem[];
11  className?: string;
12  active?: boolean;
13  listenToKeyboard?: boolean;
14}
15 
16const keySymbolMap = {
17  command: "⌘",
18  cmd: "⌘",
19  control: "⌃",
20  ctrl: "⌃",
21  alt: "⌥",
22  option: "⌥",
23  space: "␣",
24  arrowleft: "←",
25  left: "←",
26  arrowdown: "↓",
27  down: "↓",
28  arrowup: "↑",
29  up: "↑",
30  arrowright: "→",
31  right: "→",
32} as const;
33 
34const keyHotkeyMap: Record<string, string> = {
35  command: "meta",
36  cmd: "meta",
37  control: "ctrl",
38  ctrl: "ctrl",
39  alt: "alt",
40  option: "alt",
41  shift: "shift",
42  enter: "enter",
43  return: "enter",
44  space: "space",
45  arrowleft: "left",
46  left: "left",
47  arrowdown: "down",
48  down: "down",
49  arrowup: "up",
50  up: "up",
51  arrowright: "right",
52  right: "right",
53};
54 
55export function Kbd({ keys = [], className, active, listenToKeyboard = false }: KbdProps) {
56  const [isPressed, setIsPressed] = useState(false);
57 
58  const getKeyDisplay = (item: KeyItem): string => {
59    const key = typeof item === "string" ? item : item.display;
60    const lowerKey = key.toLowerCase();
61    return keySymbolMap[lowerKey as keyof typeof keySymbolMap] || key.toUpperCase();
62  };
63 
64  const getHotkeyString = (): string => {
65    return keys
66      .map((item) => {
67        const key = typeof item === "string" ? item : item.key;
68        const lowerKey = key.toLowerCase();
69        return keyHotkeyMap[lowerKey] || lowerKey;
70      })
71      .join("+");
72  };
73 
74  useHotkeys(
75    getHotkeyString(),
76    () => setIsPressed(true),
77    {
78      enabled: listenToKeyboard,
79      keydown: true,
80      keyup: false,
81      preventDefault: false,
82    },
83    [keys, listenToKeyboard]
84  );
85 
86  useEffect(() => {
87    if (!listenToKeyboard) return;
88 
89    const handleKeyUp = () => {
90      setIsPressed(false);
91    };
92 
93    const handleBlur = () => {
94      setIsPressed(false);
95    };
96 
97    window.addEventListener("keyup", handleKeyUp);
98    window.addEventListener("blur", handleBlur);
99 
100    return () => {
101      window.removeEventListener("keyup", handleKeyUp);
102      window.removeEventListener("blur", handleBlur);
103    };
104  }, [listenToKeyboard]);
105 
106  const isActive = active || isPressed;
107 
108  return (
109    <kbd
110      className={cn(
111// … truncated