first commit

common/resources/client/ui/keyboard/keyboard.tsx

@@ -0,0 +1,26 @@
+import {ReactNode} from 'react';
+import {isMac} from '@react-aria/utils';
+
+interface Props {
+  children: ReactNode;
+  modifier?: boolean;
+  separator?: string;
+}
+export function Keyboard({children, modifier, separator = '+'}: Props) {
+  const modKey = isMac() ? (
+    <span className="text-base align-middle">⌘</span>
+  ) : (
+    'Ctrl'
+  );
+  return (
+    <kbd className="text-xs text-muted">
+      {modifier && (
+        <>
+          {modKey}
+          {separator}
+        </>
+      )}
+      {children}
+    </kbd>
+  );
+}

common/resources/client/ui/keyboard/keycodes.enum.ts

@@ -0,0 +1,28 @@
+export enum Key {
+  ENTER = 'Enter',
+  SPACE = 'Space',
+  ESCAPE = 'Escape',
+  DELETE = 'Delete',
+  ARROW_UP = 'ArrowUp',
+  ARROW_RIGHT = 'ArrowRight',
+  ARROW_DOWN = 'ArrowDown',
+  ARROW_LEFT = 'ArrowLeft',
+  PAGE_UP = 'PageUp',
+  PAGE_DOWN = 'PageDown',
+  HOME = 'Home',
+  END = 'End',
+  BACKSPACE = 'Backspace',
+  TAB = 'Tab',
+  S = 's',
+  N = 'n',
+  A = 'a',
+  T = 't',
+  B = 'b',
+  C = 'c',
+  O = 'o',
+  P = 'p',
+  R = 'r',
+  F = 'f',
+  Y = 'y',
+  Z = 'z',
+}