From 9852d5ba79c62087b633e8d6aeb4078209ed5215 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Wed, 12 Apr 2023 21:20:18 +0800
Subject: [PATCH] feat(editor): add hotkey snippet for run button

---
 src/components/Editor.tsx |  2 ++
 src/components/Hotkey.tsx | 11 +++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index bce9edd..51a3c08 100644
--- 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
index 12f19d4..74a45c8 100644
--- 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)}
     </>
   );