mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 21:35:50 +01:00
parent 06207bf835
commit 51288234f4
42 changed files with 892 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
apps/website/components/layout/CommandModal.tsx
View File

@@ -2,6 +2,8 @@
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';
@@ -46,71 +48,81 @@ export function CommandModal({ isOpen, onClose }: CommandModalProps) {
if (!isOpen) return null;
return createPortal(
<div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[20vh] px-4">
<Box className="fixed inset-0 z-[9999] flex items-start justify-center pt-[20vh] px-4">
{/* Backdrop */}
<div
<Box
className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
onClick={onClose}
/>
{/* Modal Content */}
<div 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">
<div className="flex items-center border-b border-outline-steel px-4 py-3 gap-3">
<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
<Input
autoFocus
type="text"
variant="ghost"
placeholder="Type a command or search..."
className="flex-1 bg-transparent border-none outline-none text-text-high placeholder:text-text-low/50 text-base h-6"
className="flex-1 text-base h-6"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button onClick={onClose} className="text-text-low hover:text-text-high transition-colors">
<span className="sr-only">Close</span>
<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</kbd>
</button>
</div>
<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>
<div className="p-2">
<Box p={2}>
{results.length > 0 ? (
<div className="flex flex-col gap-1">
<div className="px-2 py-1.5 text-[10px] font-mono uppercase tracking-wider text-text-low/50 font-bold">
Suggestions
</div>
<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
<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}
>
<span className="text-sm text-text-med group-hover:text-text-high font-medium">
<Text size="sm" weight="medium" className="text-text-med group-hover:text-text-high">
{result.label}
</span>
<div className="flex items-center gap-2">
<span className="text-[10px] font-mono text-text-low bg-white/5 px-1.5 py-0.5 rounded border border-white/5">
</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}
</span>
</Text>
<ArrowRight size={14} className="text-text-low opacity-0 group-hover:opacity-100 transition-opacity -translate-x-2 group-hover:translate-x-0" />
</div>
</button>
</Box>
</Button>
))}
</div>
</Box>
) : (
<div className="px-4 py-8 text-center text-text-low text-sm">
No results found.
</div>
<Box paddingX={4} paddingY={8} className="text-center">
<Text size="sm" variant="low">
No results found.
</Text>
</Box>
)}
</div>
</Box>
<div className="px-4 py-2 bg-white/2 border-t border-white/5 flex items-center justify-between text-[10px] text-text-low">
<div className="flex gap-3">
<span><strong className="text-text-med">↑↓</strong> to navigate</span>
<span><strong className="text-text-med">↵</strong> to select</span>
</div>
<span>GridPilot Command</span>
</div>
</div>
</div>,
<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
);
}