Sebastian Krüger
2000623c67
- Add Figlet text converter with font selection and history - Add Pastel color palette generator and manipulation suite - Add comprehensive Units converter with category-based logic - Introduce AppShell with Sidebar and Header for navigation - Modernize theme system with CSS variables and new animations - Update project configuration and dependencies
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>
|
|
);
|
|
}
|