diff --git a/src/components/menu/items/index.ts b/src/components/menu/items/index.ts index 5b6cc80..0343348 100644 --- a/src/components/menu/items/index.ts +++ b/src/components/menu/items/index.ts @@ -5,3 +5,4 @@ export { Notepad as NotepadItem } from './notepad'; export { Source as SourceItem } from './source'; export { Pomodoro as PomodoroItem } from './pomodoro'; export { Presets as PresetsItem } from './presets'; +export { Shortcuts as ShortcutsItem } from './shortcuts'; diff --git a/src/components/menu/items/shortcuts.tsx b/src/components/menu/items/shortcuts.tsx new file mode 100644 index 0000000..fc9f4e1 --- /dev/null +++ b/src/components/menu/items/shortcuts.tsx @@ -0,0 +1,18 @@ +import { MdKeyboardCommandKey } from 'react-icons/md/index'; + +import { Item } from '../item'; + +interface ShortcutsProps { + open: () => void; +} + +export function Shortcuts({ open }: ShortcutsProps) { + return ( + } + label="Shortcuts" + shortcut="Shift + H" + onClick={open} + /> + ); +} diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx index d147e4f..81b95a8 100644 --- a/src/components/menu/menu.tsx +++ b/src/components/menu/menu.tsx @@ -12,10 +12,12 @@ import { SourceItem, PomodoroItem, PresetsItem, + ShortcutsItem, } from './items'; import { Divider } from './divider'; import { ShareLinkModal } from '@/components/modals/share-link'; import { PresetsModal } from '@/components/modals/presets'; +import { ShortcutsModal } from '@/components/modals/shortcuts'; import { Notepad, Pomodoro } from '@/components/toolbox'; import { fade, mix, slideY } from '@/lib/motion'; import { useSoundStore } from '@/store'; @@ -34,6 +36,7 @@ export function Menu() { pomodoro: false, presets: false, shareLink: false, + shortcuts: false, }), [], ); @@ -59,6 +62,7 @@ export function Menu() { useHotkeys('shift+n', () => open('notepad')); useHotkeys('shift+p', () => open('pomodoro')); useHotkeys('shift+alt+p', () => open('presets')); + useHotkeys('shift+h', () => open('shortcuts')); useHotkeys('shift+s', () => open('shareLink'), { enabled: !noSelected }); useCloseListener(closeAll); @@ -95,9 +99,14 @@ export function Menu() { open('presets')} /> open('shareLink')} /> + open('notepad')} /> open('pomodoro')} /> + + + open('shortcuts')} /> + @@ -113,6 +122,10 @@ export function Menu() { show={modals.shareLink} onClose={() => close('shareLink')} /> + close('shortcuts')} + /> close('presets')} /> close('notepad')} /> void; + show: boolean; +} + +export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) { + const shortcuts = [ + { + keys: ['Shift', 'H'], + label: 'Shortcuts List', + }, + { + keys: ['Shift', 'Alt', 'P'], + label: 'Presets', + }, + { + keys: ['Shift', 'S'], + label: 'Share Sounds', + }, + { + keys: ['Shift', 'N'], + label: 'Notepad', + }, + { + keys: ['Shift', 'P'], + label: 'Pomodoro Timer', + }, + { + keys: ['Shift', 'Space'], + label: 'Toggle Play', + }, + { + keys: ['Shift', 'R'], + label: 'Unselect All Sounds', + }, + ]; + + return ( + + Keyboard Shortcuts + + {shortcuts.map(shortcut => ( + + ))} + + + ); +} + +interface RowProps { + keys: Array; + label: string; +} + +function Row({ keys, label }: RowProps) { + return ( + + {label} + + + {keys.map(key => ( + {key} + ))} + + + ); +} + +interface KeyProps { + children: React.ReactNode; +} + +function Key({ children }: KeyProps) { + return {children}; +}
{label}