71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { Modal } from '@/components/shared/Modal';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Search, Command, ArrowRight } from 'lucide-react';
|
|
import { useState, useEffect } from 'react';
|
|
|
|
interface CommandModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function CommandModal({ isOpen, onClose }: CommandModalProps) {
|
|
const [query, setQuery] = useState('');
|
|
|
|
// 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()));
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title="Command Palette"
|
|
size="md"
|
|
icon={<Command size={20} />}
|
|
>
|
|
<Box className="flex flex-col gap-4">
|
|
<Box className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-text-low" size={16} />
|
|
<input
|
|
autoFocus
|
|
type="text"
|
|
placeholder="Type a command or search..."
|
|
className="w-full bg-surface-charcoal border border-outline-steel rounded-md pl-10 pr-4 py-3 text-text-high placeholder:text-text-low focus:border-primary-accent focus:outline-none transition-colors"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
/>
|
|
</Box>
|
|
|
|
<Box className="flex flex-col gap-1">
|
|
<Text size="xs" className="text-text-low font-mono uppercase tracking-wider px-2 mb-1">
|
|
Suggestions
|
|
</Text>
|
|
{results.map((result, i) => (
|
|
<button
|
|
key={i}
|
|
className="flex items-center justify-between px-3 py-2 rounded-md hover:bg-white/5 text-left group transition-colors"
|
|
onClick={onClose}
|
|
>
|
|
<Text size="sm" className="text-text-med group-hover:text-text-high">
|
|
{result.label}
|
|
</Text>
|
|
<Box className="flex items-center gap-2">
|
|
<Text size="xs" className="text-text-low font-mono bg-white/5 px-1.5 py-0.5 rounded">
|
|
{result.shortcut}
|
|
</Text>
|
|
<ArrowRight size={14} className="text-text-low opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</Box>
|
|
</button>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|