129 lines
4.7 KiB
TypeScript
129 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Input } from '@/ui/Input';
|
|
import { Button } from '@/ui/Button';
|
|
import { Search, Command, ArrowRight, X } from 'lucide-react';
|
|
import { useState, useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
interface CommandModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function CommandModal({ isOpen, onClose }: CommandModalProps) {
|
|
const [query, setQuery] = useState('');
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const down = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
onClose();
|
|
}
|
|
};
|
|
if (isOpen) {
|
|
document.addEventListener('keydown', down);
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
return () => {
|
|
document.removeEventListener('keydown', down);
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [isOpen, onClose]);
|
|
|
|
// Mock results
|
|
const results = [
|
|
{ label: 'Go to Dashboard', shortcut: 'G D' },
|
|
{ label: 'Find Driver...', shortcut: 'Cmd F' },
|
|
{ label: 'Create League', shortcut: 'C L' },
|
|
].filter(r => r.label.toLowerCase().includes(query.toLowerCase()));
|
|
|
|
if (!mounted) return null;
|
|
if (!isOpen) return null;
|
|
|
|
return createPortal(
|
|
<Box className="fixed inset-0 z-[9999] flex items-start justify-center pt-[20vh] px-4">
|
|
{/* Backdrop */}
|
|
<Box
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal Content */}
|
|
<Box className="relative w-full max-w-lg bg-surface-charcoal border border-outline-steel rounded-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
|
<Box display="flex" alignItems="center" className="border-b border-outline-steel px-4 py-3 gap-3">
|
|
<Search className="text-text-low" size={18} />
|
|
<Input
|
|
autoFocus
|
|
variant="ghost"
|
|
placeholder="Type a command or search..."
|
|
className="flex-1 text-base h-6"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
/>
|
|
<Button variant="ghost" size="sm" onClick={onClose} className="text-text-low hover:text-text-high transition-colors">
|
|
<Text as="span" className="sr-only">Close</Text>
|
|
<Text as="kbd" className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono bg-white/5 rounded border border-white/5">ESC</Text>
|
|
</Button>
|
|
</Box>
|
|
|
|
<Box p={2}>
|
|
{results.length > 0 ? (
|
|
<Box display="flex" flexDirection="col" gap={1}>
|
|
<Box paddingX={2} paddingY={1.5}>
|
|
<Text size="xs" weight="bold" uppercase mono className="tracking-wider text-text-low/50">
|
|
Suggestions
|
|
</Text>
|
|
</Box>
|
|
{results.map((result, i) => (
|
|
<Button
|
|
key={i}
|
|
variant="ghost"
|
|
fullWidth
|
|
className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-white/5 text-left group transition-colors"
|
|
onClick={onClose}
|
|
>
|
|
<Text size="sm" weight="medium" className="text-text-med group-hover:text-text-high">
|
|
{result.label}
|
|
</Text>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Text as="span" size="xs" mono className="text-text-low bg-white/5 px-1.5 py-0.5 rounded border border-white/5">
|
|
{result.shortcut}
|
|
</Text>
|
|
<ArrowRight size={14} className="text-text-low opacity-0 group-hover:opacity-100 transition-opacity -translate-x-2 group-hover:translate-x-0" />
|
|
</Box>
|
|
</Button>
|
|
))}
|
|
</Box>
|
|
) : (
|
|
<Box paddingX={4} paddingY={8} className="text-center">
|
|
<Text size="sm" variant="low">
|
|
No results found.
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
<Box paddingX={4} paddingY={2} display="flex" alignItems="center" justifyContent="space-between" className="bg-white/2 border-t border-white/5">
|
|
<Box display="flex" gap={3}>
|
|
<Text size="xs" variant="low">
|
|
<Text as="strong" variant="med">↑↓</Text> to navigate
|
|
</Text>
|
|
<Text size="xs" variant="low">
|
|
<Text as="strong" variant="med">↵</Text> to select
|
|
</Text>
|
|
</Box>
|
|
<Text size="xs" variant="low">GridPilot Command</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>,
|
|
document.body
|
|
);
|
|
}
|