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
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { HexColorPicker } from 'react-colorful';
|
|
import { cn } from '@/lib/utils/cn';
|
|
import { hexToRgb } from '@/lib/color/utils/color';
|
|
|
|
interface ColorPickerProps {
|
|
color: string;
|
|
onChange: (color: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
|
|
const rgb = hexToRgb(color);
|
|
const brightness = rgb ? (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 : 0;
|
|
const textColor = brightness > 128 ? '#000000' : '#ffffff';
|
|
const borderColor = brightness > 128 ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.2)';
|
|
|
|
return (
|
|
<div className={cn('flex flex-col gap-3', className)}>
|
|
<HexColorPicker color={color} onChange={onChange} className="!w-full" />
|
|
<input
|
|
type="text"
|
|
value={color}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder="#ff0099"
|
|
className="w-full font-mono text-xs rounded-lg px-3 py-2 outline-none transition-colors duration-200 border"
|
|
style={{ backgroundColor: color, color: textColor, borderColor }}
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|