ShortcutHint.tsx

import { Icon, InlineIcon } from '@iconify/react';
import bxQuestionMark from '@iconify/icons-bx/bx-question-mark';
import { useState } from 'react';
import { Fade } from '@material-ui/core';

// mapping of language codes to shortcut strings
const shortcuts = {
  en: [
    {
      shortcut: 'CMD + K',
      title: 'Open the command pallete',
    },
    {
      shortcut: 'J or K',
      title: 'Go up and down the list',
    },
    {
      shortcut: 'Enter',
      title: 'When ticket is open, focus on the response field',
    },
    {
      shortcut: 'CMD + Enter',
      title: 'Submit ticket response (choose status)',
    },
    {
      shortcut: 'Esc',
      title: 'Exit/unfocus',
    },
    {
      shortcut: 'CMD + Arrow',
      title: 'Change ticket',
    },
  ],
};

// Main shortcut hint component
function ShortcutHint() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div
      onClick={() => setIsOpen(false)}
      style={{
        height: '95vh',
        width: '100%',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        flexDirection: 'column',
      }}
    >
      <Fade timeout={100} in={isOpen}>
        <ShortcutMenu open={isOpen} />
      </Fade>
      <div
        className='qMark'
        onClick={(event) => {
          setIsOpen(!isOpen);
          event.stopPropagation();
          event.preventDefault();
        }}
      >
        <Icon
          icon={bxQuestionMark}
          style={{ color: '#928a8a', fontSize: '20px' }}
        />
      </div>
      <style jsx>{`
        .qMark {
          width: 28px;
          height: 28px;
          background-color: #f6f6f6;
          color: #928a8a;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 20px;
          cursor: pointer;
          box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.1);
        }
      `}</style>
    </div>
  );
}

// Menu component for shortcuts
function ShortcutMenu({ open }) {
  const isApple = isMacintosh();
  const shortcuts = getShortcuts();
  return (
    <div className={`shortcutMenu ${open ? '' : 'hidden'}`}>
      {shortcuts.map((shortcutObj) => {
        return (
          <div className='shortcutRow'>
            <div className='columnKey'>
              {isApple
                ? shortcutObj.shortcut
                : shortcutObj.shortcut.replace(/CMD/g, 'Alt')}
            </div>
            <div className='columnTitle'>{shortcutObj.title}</div>
          </div>
        );
      })}
      <style jsx>{`
        .shortcutMenu {
          width: 450px;
          height: 163px;
          overflow-y: scroll;
          overflow-x: hidden;
          background-color: #f6f6f6;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          color: #222222;
          margin-bottom: 10px;
          cursor: pointer;
          border-radius: 3px;
          transition: all 0.1s ease-in-out;
        }

        .hidden {
          opacity: 0;
          width: 0;
          pointer-events: none;
        }

        .shortcutRow {
          height: 26px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: row;
          width: 100%;
          border-bottom: solid 1px #ecedf2;
          transition: background-color 0.2s cubic-bezier(0.23, 1.05, 0.58, 1);
        }

        .shortcutRow:hover {
          background-color: #ecedf2;
        }

        .columnKey {
          flex: 1;
          display: flex;
          align-items: center;
          margin-left: 25px;
          font-weight: 500;
          color: #555555;
        }

        .columnTitle {
          flex: 3;
          display: flex;
          align-items: center;
          color: #222222;
        }
      `}</style>
    </div>
  );
}

// Helper functions
function getShortcuts() {
  let languageCode = navigator.language.split('-')[0];
  return shortcuts[languageCode];
}

function isMacintosh() {
  return (
    [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ].includes(navigator.platform) ||
    // iPad on iOS 13 detection
    navigator.userAgent.includes('Mac')
  );
}

export default ShortcutHint;