website refactor

apps/website/components/layout/CommandModal.tsx

@@ -0,0 +1,70 @@
+'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>
+  );
+}