diff --git a/src/components/common/KeyboardShortcutHint.jsx b/src/components/common/KeyboardShortcutHint.jsx new file mode 100644 index 0000000..9fcaef9 --- /dev/null +++ b/src/components/common/KeyboardShortcutHint.jsx @@ -0,0 +1,71 @@ +import { Chip } from '@mui/joy' +import PropTypes from 'prop-types' + +/** + * A component that displays keyboard shortcut hints as small chips + * Only visible on non-mobile devices + * Supports platform-specific shortcuts (Cmd on Mac, Ctrl on Windows) and Shift key + */ +function KeyboardShortcutHint({ + shortcut, + show = true, + withCmd = true, + withShift = false, + sx = {}, + ...props +}) { + if (!show) return null + + const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0 + const modifierKey = isMac ? '⌘' : 'Ctrl' + + // Build the shortcut display string + let displayShortcut = '' + if (withCmd) { + displayShortcut += modifierKey + } + if (withShift) { + displayShortcut += (displayShortcut ? ' + ' : '') + 'Shift' + } + if (shortcut) { + displayShortcut += (displayShortcut ? ' + ' : '') + shortcut + } + + return ( + + {displayShortcut} + + ) +} + +KeyboardShortcutHint.propTypes = { + shortcut: PropTypes.string.isRequired, + show: PropTypes.bool, + withCmd: PropTypes.bool, + withShift: PropTypes.bool, + sx: PropTypes.object, +} + +export default KeyboardShortcutHint