fix: display cmd icon for macs (#90)

j4k0xb · Jun 8, 2024 · c1fa1d6 · c1fa1d6
1 parent 2974a0c
commit c1fa1d6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/apps/playground/src/components/menu/Menu.tsx b/apps/playground/src/components/menu/Menu.tsx
@@ -2,6 +2,7 @@ import { For, createSignal, onCleanup, onMount } from 'solid-js';
 import { setSettings, settings, type Settings } from '../../hooks/useSettings';
 import { useWorkspaces, type Workspace } from '../../indexeddb';
 import { openFile } from '../../utils/files';
+import { ctrlCmdIcon } from '../../utils/platform';
 import MenuButton from './MenuButton';
 import MenuDropdown from './MenuDropdown';
 import MenuHeader from './MenuHeader';
@@ -42,7 +43,7 @@ export default function Menu(props: Props) {
         onOpen={() => setOpenedMenu('file')}
       >
         <MenuButton
-          shortcut={['Ctrl', 'O']}
+          shortcut={[ctrlCmdIcon, 'O']}
           onClick={() => openFile(props.onFileOpen)}
         >
           Open File…
@@ -62,7 +63,7 @@ export default function Menu(props: Props) {
             )}
           </For>
         </MenuDropdown>
-        <MenuButton shortcut={['Ctrl', 'S']} onClick={props.onSave}>
+        <MenuButton shortcut={[ctrlCmdIcon, 'S']} onClick={props.onSave}>
           Save
         </MenuButton>
       </MenuHeader>

diff --git a/apps/playground/src/utils/platform.ts b/apps/playground/src/utils/platform.ts
@@ -0,0 +1,9 @@
+const isMacintosh = navigator.userAgent.includes('Macintosh');
+const isIOS =
+  (navigator.userAgent.includes('Macintosh') ||
+    navigator.userAgent.includes('iPad') ||
+    navigator.userAgent.includes('iPhone')) &&
+  !!navigator.maxTouchPoints &&
+  navigator.maxTouchPoints > 0;
+
+export const ctrlCmdIcon = isMacintosh || isIOS ? '⌘' : 'Ctrl';