diff options
| author | Anwarul Islam <anwaarulislaam@gmail.com> | 2025-07-18 05:53:42 +0600 |
|---|---|---|
| committer | Anwarul Islam <anwaarulislaam@gmail.com> | 2025-07-18 05:53:42 +0600 |
| commit | f5d221feec01c835b7c2e7e2a29cdae312f514c1 (patch) | |
| tree | 01185f291201c2276f9df59871b900d7f3f9ab21 /apps | |
| parent | c34b402297c0e06d0208571250357b2ea6acf2a9 (diff) | |
| download | opencut-f5d221feec01c835b7c2e7e2a29cdae312f514c1.tar.gz | |
Refactor KeyBadge component to return key names directly and update ShortcutItem to use <kbd> for key display
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/components/keyboard-shortcuts-help.tsx | 15 |
1 files changed, 3 insertions, 12 deletions
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index 936254be..e883da14 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -16,7 +16,7 @@ import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts"; const KeyBadge = ({ keyName }: { keyName: string }) => { // Replace common key names with symbols or friendly names - const displayKey = keyName + return keyName .replace("Cmd", "⌘") .replace("Shift", "Shift") .replace("ArrowLeft", "Arrow Left") @@ -26,12 +26,6 @@ const KeyBadge = ({ keyName }: { keyName: string }) => { .replace("←", "◀") .replace("→", "▶") .replace("Space", "Space"); - - return ( - <Badge variant="secondary" className="font-mono text-xs px-1 py-1"> - {displayKey} - </Badge> - ); }; const ShortcutItem = ({ shortcut }: { shortcut: any }) => { @@ -65,12 +59,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => { <div key={index} className="flex items-center gap-1"> <div className="flex items-center"> {key.split("+").map((keyPart: string, partIndex: number) => ( - <div key={partIndex} className="flex items-center gap-1"> + <kbd key={partIndex} className="shortcut-key"> <KeyBadge keyName={keyPart} /> - {partIndex < key.split("+").length - 1 && ( - <span className="text-xs text-muted-foreground">+</span> - )} - </div> + </kbd> ))} </div> {index < displayKeys.length - 1 && ( |