0d03156e04
Ensure consistent spacing and alignment between header, main content, and footer: - Update Navbar to use max-w-7xl and px-8 (matching Footer) - Standardize all page containers to use px-8 py-12 padding - Change home page from max-w-5xl to max-w-7xl for consistency - Update all 12 pages to use consistent padding (px-8 py-12 instead of p-8) This creates a unified visual alignment across the entire application, with all content sections (navbar, main, footer) using the same max-width (7xl) and horizontal padding (px-8). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { ColorSwatch } from '@/components/color/ColorSwatch';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Select } from '@/components/ui/select';
|
|
import { useNamedColors } from '@/lib/api/queries';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
export default function NamedColorsPage() {
|
|
const [search, setSearch] = useState('');
|
|
const [sortBy, setSortBy] = useState<'name' | 'hue'>('name');
|
|
|
|
const { data, isLoading, isError } = useNamedColors();
|
|
|
|
const filteredColors = useMemo(() => {
|
|
if (!data) return [];
|
|
|
|
let colors = data.colors.filter(
|
|
(color) =>
|
|
color.name.toLowerCase().includes(search.toLowerCase()) ||
|
|
color.hex.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
|
|
if (sortBy === 'name') {
|
|
colors.sort((a, b) => a.name.localeCompare(b.name));
|
|
}
|
|
// For hue sorting, we'd need to convert to HSL which requires the API
|
|
// For now, just keep alphabetical as default
|
|
|
|
return colors;
|
|
}, [data, search, sortBy]);
|
|
|
|
return (
|
|
<div className="min-h-screen px-8 py-12">
|
|
<div className="max-w-7xl mx-auto space-y-8">
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-2">Named Colors</h1>
|
|
<p className="text-muted-foreground">
|
|
Explore 148 CSS/X11 named colors
|
|
</p>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<div className="flex-1">
|
|
<Input
|
|
type="text"
|
|
placeholder="Search by name or hex..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="w-full sm:w-48">
|
|
<Select value={sortBy} onChange={(e) => setSortBy(e.target.value as 'name' | 'hue')}>
|
|
<option value="name">Sort by Name</option>
|
|
<option value="hue">Sort by Hue</option>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Colors Grid */}
|
|
<div className="p-6 border rounded-lg bg-card">
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
|
|
{isError && (
|
|
<div className="text-center py-12 text-destructive">
|
|
Failed to load named colors
|
|
</div>
|
|
)}
|
|
|
|
{filteredColors.length > 0 && (
|
|
<>
|
|
<div className="mb-4 text-sm text-muted-foreground">
|
|
Showing {filteredColors.length} colors
|
|
</div>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
|
{filteredColors.map((color) => (
|
|
<div key={color.name} className="flex flex-col items-center gap-2">
|
|
<ColorSwatch color={color.hex} showLabel={false} />
|
|
<div className="text-center">
|
|
<div className="text-sm font-medium">{color.name}</div>
|
|
<div className="text-xs font-mono text-muted-foreground">
|
|
{color.hex}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{filteredColors.length === 0 && !isLoading && !isError && (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
No colors match your search
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|