Add configurable hotkeys support (#343)

src-web/components/core/HotkeyList.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { Fragment } from 'react';
+import type { HotkeyAction } from '../../hooks/useHotKey';
+import { Hotkey } from './Hotkey';
+import { HotkeyLabel } from './HotkeyLabel';
+
+interface Props {
+  hotkeys: HotkeyAction[];
+  bottomSlot?: ReactNode;
+  className?: string;
+}
+
+export const HotkeyList = ({ hotkeys, bottomSlot, className }: Props) => {
+  return (
+    <div className={classNames(className, 'h-full flex items-center justify-center')}>
+      <div className="grid gap-2 grid-cols-[auto_auto]">
+        {hotkeys.map((hotkey) => (
+          <Fragment key={hotkey}>
+            <HotkeyLabel className="truncate" action={hotkey} />
+            <Hotkey className="ml-4" action={hotkey} />
+          </Fragment>
+        ))}
+        {bottomSlot}
+      </div>
+    </div>
+  );
+};