Sebastian Krüger
0727ec7675
Rewrites all color components to use the glass panel design language, fixed-height two-panel layout, and tab-based navigation. - ColorManipulation: lg:grid-cols-5 split — left 2/5 shows ColorPicker + ColorInfo always; right 3/5 has Info/Adjust/Harmony/Gradient tabs; mobile 'Pick | Explore' switcher - ColorPicker: removes shadcn Input/Label, native input with dynamic contrast color matching the picked hue - ColorInfo: removes shadcn Button, native copy buttons on hover, metadata chips with bg-primary/5 background - ManipulationPanel: keeps Slider, replaces Button with glass action buttons, tighter spacing and muted labels - ExportMenu: keeps Select, replaces Buttons with glass action buttons, code preview in dark terminal box (#06060e) - ColorSwatch: rectangular full-width design for palette grids, hover reveals copy icon, hex label at bottom - PaletteGrid: denser grid (4→5 cols), smaller swatch height Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
802 B
TypeScript
34 lines
802 B
TypeScript
'use client';
|
|
|
|
import { ColorSwatch } from './ColorSwatch';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
interface PaletteGridProps {
|
|
colors: string[];
|
|
onColorClick?: (color: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function PaletteGrid({ colors, onColorClick, className }: PaletteGridProps) {
|
|
if (colors.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
No colors in palette yet
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn('grid grid-cols-4 sm:grid-cols-5 gap-2', className)}>
|
|
{colors.map((color, index) => (
|
|
<ColorSwatch
|
|
key={`${color}-${index}`}
|
|
color={color}
|
|
size="sm"
|
|
onClick={onColorClick ? () => onColorClick(color) : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|