89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
|
import { Dialog } from '@/components/ui/dialog';
|
||
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
||
|
|
import { KEYBOARD_SHORTCUTS } from '@/config/constants';
|
||
|
|
|
||
|
|
interface KeyboardShortcutsHelpProps {
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function KeyboardShortcutsHelp({
|
||
|
|
open,
|
||
|
|
onClose,
|
||
|
|
}: KeyboardShortcutsHelpProps) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
const shortcuts = [
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.SEARCH,
|
||
|
|
description: t('keyboard.shortcuts.search', 'Focus search or navigate to search page'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.NEW_MESSAGE,
|
||
|
|
description: t('keyboard.shortcuts.newMessage', 'Open new chat/message'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.PLAY_PAUSE,
|
||
|
|
description: t('keyboard.shortcuts.playPause', 'Play or pause current track'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.NEXT_TRACK,
|
||
|
|
description: t('keyboard.shortcuts.nextTrack', 'Play next track'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.PREVIOUS_TRACK,
|
||
|
|
description: t('keyboard.shortcuts.previousTrack', 'Play previous track'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.VOLUME_UP,
|
||
|
|
description: t('keyboard.shortcuts.volumeUp', 'Increase volume'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.VOLUME_DOWN,
|
||
|
|
description: t('keyboard.shortcuts.volumeDown', 'Decrease volume'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.MUTE,
|
||
|
|
description: t('keyboard.shortcuts.mute', 'Toggle mute'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'Ctrl+B / Cmd+B',
|
||
|
|
description: t('keyboard.shortcuts.toggleSidebar', 'Toggle sidebar'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.ESCAPE,
|
||
|
|
description: t('keyboard.shortcuts.escape', 'Close modals or go back'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: KEYBOARD_SHORTCUTS.HELP,
|
||
|
|
description: t('keyboard.shortcuts.help', 'Show this help dialog'),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog
|
||
|
|
open={open}
|
||
|
|
onClose={onClose}
|
||
|
|
title={t('keyboard.shortcuts.title', 'Keyboard Shortcuts')}
|
||
|
|
size="lg"
|
||
|
|
>
|
||
|
|
<div className="space-y-3">
|
||
|
|
{shortcuts.map((shortcut, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 last:border-0"
|
||
|
|
>
|
||
|
|
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||
|
|
{shortcut.description}
|
||
|
|
</span>
|
||
|
|
<kbd className="px-2 py-1 text-xs font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded">
|
||
|
|
{shortcut.key}
|
||
|
|
</kbd>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|