173d81d9d4
Add complete color manipulation interface: **Color Components:** - ColorPicker - Interactive hex color picker with text input - Uses react-colorful for visual selection - Manual input support for any color format - Real-time updates - ColorDisplay - Large color preview swatch - Configurable sizes (sm, md, lg, xl) - Optional border styling - Accessible with ARIA labels - ColorInfo - Comprehensive color information display - Shows all formats: Hex, RGB, HSL, Lab, OkLab - Copy to clipboard functionality for each format - Displays brightness, luminance, light/dark type - Shows named color matches **API Integration:** - React Query hooks for all Pastel API endpoints - useColorInfo - Get color information - useConvertFormat - Format conversion - useLighten, useDarken, useSaturate, etc. - Manipulations - useGenerateRandom, useGenerateDistinct, useGenerateGradient - useNamedColors - Cached named colors list - Automatic error handling and loading states **Playground Page (/playground):** - Two-column layout: picker + info - Live color preview with large swatch - Real-time API integration with loading states - Error handling with user-friendly messages - Quick action buttons (ready for implementation) - Responsive grid layout **Features:** - Toast notifications for clipboard copy - Loading spinners during API calls - Error display with helpful messages - Accessible keyboard navigation - Smooth transitions and animations Build successful with playground page rendering! Ready for color manipulation actions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
39 lines
704 B
TypeScript
39 lines
704 B
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
interface ColorDisplayProps {
|
|
color: string;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
className?: string;
|
|
showBorder?: boolean;
|
|
}
|
|
|
|
export function ColorDisplay({
|
|
color,
|
|
size = 'lg',
|
|
className,
|
|
showBorder = true,
|
|
}: ColorDisplayProps) {
|
|
const sizeClasses = {
|
|
sm: 'h-16 w-16',
|
|
md: 'h-32 w-32',
|
|
lg: 'h-48 w-48',
|
|
xl: 'h-64 w-64',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'rounded-lg transition-all',
|
|
showBorder && 'ring-2 ring-border',
|
|
sizeClasses[size],
|
|
className
|
|
)}
|
|
style={{ backgroundColor: color }}
|
|
role="img"
|
|
aria-label={`Color swatch: ${color}`}
|
|
/>
|
|
);
|
|
}
|