38 lines
847 B
TypeScript
38 lines
847 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-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-4',
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{colors.map((color, index) => (
|
||
|
|
<ColorSwatch
|
||
|
|
key={`${color}-${index}`}
|
||
|
|
color={color}
|
||
|
|
onClick={onColorClick ? () => onColorClick(color) : undefined}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|