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>
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils/cn';
|
|
import { Check, Copy } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface ColorSwatchProps {
|
|
color: string;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showLabel?: boolean;
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ColorSwatch({ color, size = 'md', showLabel = true, onClick, className }: ColorSwatchProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleClick = () => {
|
|
if (onClick) { onClick(); return; }
|
|
navigator.clipboard.writeText(color);
|
|
setCopied(true);
|
|
toast.success(`Copied ${color}`);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleClick}
|
|
title={color}
|
|
aria-label={`Color ${color}`}
|
|
className={cn(
|
|
'group relative w-full rounded-lg overflow-hidden border border-white/8 transition-all',
|
|
'hover:scale-[1.04] hover:border-white/20 hover:shadow-lg hover:shadow-black/20',
|
|
size === 'sm' && 'h-10',
|
|
size === 'md' && 'h-14',
|
|
size === 'lg' && 'h-20',
|
|
className
|
|
)}
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/25">
|
|
{copied
|
|
? <Check className="w-3.5 h-3.5 text-white drop-shadow" />
|
|
: <Copy className="w-3.5 h-3.5 text-white drop-shadow" />
|
|
}
|
|
</div>
|
|
{showLabel && (
|
|
<div className="absolute bottom-0 inset-x-0 px-1 py-0.5 text-[9px] font-mono text-white/70 bg-black/25 truncate text-center leading-tight">
|
|
{color}
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|