Hotkey labels

src-web/components/core/HotKeyLabel.tsx

@@ -0,0 +1,11 @@
+import type { HotkeyAction } from '../../hooks/useHotkey';
+import { useHotKeyLabel } from '../../hooks/useHotkey';
+
+interface Props {
+  action: HotkeyAction | null;
+}
+
+export function HotKeyLabel({ action }: Props) {
+  const label = useHotKeyLabel(action);
+  return <span>{label}</span>;
+}

src-web/components/core/HotKeyList.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import type { HotkeyAction } from '../../hooks/useHotkey';
 import { HotKey } from './HotKey';
+import { HotKeyLabel } from './HotKeyLabel';
 
 interface Props {
-  hotkeys: { action: HotkeyAction; label: string }[];
+  hotkeys: HotkeyAction[];
 }
 
 export const HotKeyList = ({ hotkeys }: Props) => {
   return (
-    <div className="mx-auto h-full flex items-center text-gray-800 text-sm">
+    <div className="mx-auto h-full flex items-center text-gray-700 text-sm">
       <div className="flex flex-col gap-1">
         {hotkeys.map((hotkey) => (
-          <div key={hotkey.action} className="grid grid-cols-2">
-            <p>{hotkey.label}</p>
-            <div className="ml-auto">
-              <HotKey action={hotkey.action} />
-            </div>
+          <div key={hotkey} className="grid grid-cols-2">
+            <HotKeyLabel action={hotkey} />
+            <HotKey className="ml-auto" action={hotkey} />
           </div>
         ))}
       </div>