62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import * as React from 'react';
|
||
|
|
import { X } from 'lucide-react';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||
|
|
import { formatShortcut, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface KeyboardShortcutsModalProps {
|
||
|
|
shortcuts: KeyboardShortcut[];
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function KeyboardShortcutsModal({ shortcuts, isOpen, onClose }: KeyboardShortcutsModalProps) {
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (isOpen) {
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
} else {
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
}
|
||
|
|
return () => {
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
};
|
||
|
|
}, [isOpen]);
|
||
|
|
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
|
||
|
|
<div
|
||
|
|
className="absolute inset-0"
|
||
|
|
onClick={onClose}
|
||
|
|
/>
|
||
|
|
<Card className="relative w-full max-w-md shadow-2xl animate-in zoom-in-95 duration-200">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-xl font-bold">Keyboard Shortcuts</CardTitle>
|
||
|
|
<Button variant="ghost" size="icon" onClick={onClose} className="rounded-full">
|
||
|
|
<X className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="pt-4">
|
||
|
|
<div className="space-y-4">
|
||
|
|
{shortcuts.map((shortcut, index) => (
|
||
|
|
<div key={index} className="flex items-center justify-between gap-4">
|
||
|
|
<span className="text-sm text-muted-foreground">{shortcut.description}</span>
|
||
|
|
<kbd className="pointer-events-none inline-flex h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
|
||
|
|
{formatShortcut(shortcut)}
|
||
|
|
</kbd>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="mt-6 flex justify-end">
|
||
|
|
<Button onClick={onClose}>Close</Button>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|