feat(editor): add hotkey snippet for run button

NUSSOC · Apr 12, 2023 · 9852d5b · 9852d5b
1 parent 0a10aea
commit 9852d5b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -7,6 +7,7 @@ import useFile from '../hooks/useFile';
 import useFilesMutations from '../hooks/useFilesMutations';
 
 import Button from './Button';
+import K from './Hotkey';
 
 interface EditorProps {
   onRunCode?: (code: string) => void;
@@ -72,6 +73,7 @@ const CoreEditor = (props: CoreEditorProps): JSX.Element => {
         <div className="absolute bottom-3 right-3 space-x-2">
           <Button icon={PlayIcon} onClick={saveThenRunCode}>
             Run
+            <K className="ml-2 text-blue-900/60 ring-blue-900/60" of="F5" />
           </Button>
         </div>
       )}

diff --git a/src/components/Hotkey.tsx b/src/components/Hotkey.tsx
@@ -1,5 +1,6 @@
 interface HotkeyProps {
   of: string;
+  className?: string;
 }
 
 const isMac = navigator.platform.startsWith('Mac');
@@ -30,12 +31,18 @@ const Hotkey = (props: HotkeyProps): JSX.Element => {
 
   const keys = hotkey.split(SEPARATOR);
 
-  if (isMac) return <kbd>{keys.map(convert).join('')}</kbd>;
+  if (isMac)
+    return <kbd className={props.className}>{keys.map(convert).join('')}</kbd>;
 
   return (
     <>
       {keys
-        .flatMap((key) => [<kbd key={key}>{convert(key)}</kbd>, SEPARATOR])
+        .flatMap((key) => [
+          <kbd key={key} className={props.className}>
+            {convert(key)}
+          </kbd>,
+          SEPARATOR,
+        ])
         .slice(0, -1)}
     </>
   );