89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useNavigate } from '@tanstack/react-router';
|
|
|
|
interface Shortcut {
|
|
keys: string[];
|
|
description: string;
|
|
}
|
|
|
|
const SHORTCUTS: Shortcut[] = [
|
|
{ keys: ['⌘', 'K'], description: 'Command Palette' },
|
|
{ keys: ['?'], description: 'Diese Hilfe anzeigen' },
|
|
{ keys: ['T'], description: 'Theme umschalten' },
|
|
{ keys: ['N'], description: 'Neuen Eintrag erstellen' },
|
|
{ keys: ['G', 'H'], description: 'Zum Dashboard' },
|
|
{ keys: ['G', 'C'], description: 'Zu Kunden' },
|
|
{ keys: ['G', 'P'], description: 'Zu Projekten' },
|
|
{ keys: ['G', 'T'], description: 'Zu Zeiteinträgen' },
|
|
{ keys: ['G', 'S'], description: 'Zu Einstellungen' },
|
|
];
|
|
|
|
export default function KeyboardHelp() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === '?') {
|
|
e.preventDefault();
|
|
setIsOpen(true);
|
|
}
|
|
if (e.key === 'Escape' && isOpen) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<div
|
|
className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-xl shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="p-6 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold text-slate-900 dark:text-white">Tastatur-Shortcuts</h2>
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="p-1 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-md text-slate-500"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4">
|
|
{SHORTCUTS.map((shortcut, idx) => (
|
|
<div key={idx} className="flex items-center justify-between group">
|
|
<span className="text-slate-600 dark:text-slate-400 text-sm">
|
|
{shortcut.description}
|
|
</span>
|
|
<div className="flex gap-1">
|
|
{shortcut.keys.map((key, kIdx) => (
|
|
<kbd
|
|
key={kIdx}
|
|
className="px-2 py-1 text-xs font-medium text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded shadow-sm"
|
|
>
|
|
{key}
|
|
</kbd>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="p-4 bg-slate-50 dark:bg-slate-800/50 text-center">
|
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
|
Drücke <kbd className="px-1 bg-slate-200 dark:bg-slate-700 rounded">Esc</kbd> zum Schließen
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |