KeyMap.tsx30 lines · main

1	/**
2	* Render keyMap
3	*
4	* @param {String} keyMap ex: Command+Enter ; separate key using +
5	*/
6
7	const customKeyChars: any = {
8	command: '⌘',
9	control: '⌃',
10	option: '⌥',
11	enter: '↵',
12	}
13
14	const KeyMap = ({ keyMap }: any) => {
15	if (!keyMap) return null
16
17	const keys = keyMap.split('+')
18	const keymapRender = keys.map((key: any) => {
19	let keyChar = key
20	if (key.toLowerCase() in customKeyChars) keyChar = customKeyChars[key.toLowerCase()]
21	return (
22	<span key={key} className={`btn-keymap ${keyChar.length > 1 ? 'px-2' : ''}`}>
23	{keyChar}
24	</span>
25	)
26	})
27	return <p className="inline-flex space-x-1.5">{keymapRender}</p>
28	}
29
30	export default KeyMap