94ea87ca83
Add complete color manipulation interface to playground: **New Components:** - Slider component - Customizable range input with label and value display - Smooth animations on thumb hover - Keyboard accessible - Shows current value with optional suffix - Tailwind-styled for consistency - ManipulationPanel component - Full color manipulation controls - Lighten/Darken sliders (0-100% range) - Saturate/Desaturate sliders (0-100% range) - Hue rotation slider (-180° to +180°) - Complementary color quick action - All operations integrated with Pastel API - Toast notifications for success/error - Loading states during API calls **Playground Enhancements:** - Replaced placeholder quick action buttons with ManipulationPanel - Full integration with color manipulation mutations - Real-time color updates after each operation - User-friendly feedback with toast messages - Amount controls for precise adjustments **Features:** - Live preview of manipulation results - Configurable amounts before applying - Success/error handling with helpful messages - Disabled state during API operations - Smooth user experience with immediate feedback **API Integration:** - useLighten, useDarken mutations - useSaturate, useDesaturate mutations - useRotate for hue rotation - useComplement for complementary colors - All mutations with proper error handling Build successful! Color manipulation tools fully functional. Next: Navigation, theme system, and additional UI components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { ColorPicker } from '@/components/color/ColorPicker';
|
|
import { ColorDisplay } from '@/components/color/ColorDisplay';
|
|
import { ColorInfo } from '@/components/color/ColorInfo';
|
|
import { ManipulationPanel } from '@/components/tools/ManipulationPanel';
|
|
import { useColorInfo } from '@/lib/api/queries';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
export default function PlaygroundPage() {
|
|
const [color, setColor] = useState('#ff0099');
|
|
|
|
const { data, isLoading, isError, error } = useColorInfo({
|
|
colors: [color],
|
|
});
|
|
|
|
const colorInfo = data?.colors[0];
|
|
|
|
return (
|
|
<div className="min-h-screen p-8">
|
|
<div className="max-w-7xl mx-auto space-y-8">
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-2">Color Playground</h1>
|
|
<p className="text-muted-foreground">
|
|
Interactive color manipulation and analysis tool
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{/* Left Column: Color Picker and Display */}
|
|
<div className="space-y-6">
|
|
<div className="p-6 border rounded-lg bg-card">
|
|
<h2 className="text-xl font-semibold mb-4">Color Picker</h2>
|
|
<ColorPicker color={color} onChange={setColor} />
|
|
</div>
|
|
|
|
<div className="p-6 border rounded-lg bg-card">
|
|
<h2 className="text-xl font-semibold mb-4">Preview</h2>
|
|
<div className="flex justify-center">
|
|
<ColorDisplay color={color} size="xl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Color Information */}
|
|
<div className="space-y-6">
|
|
<div className="p-6 border rounded-lg bg-card">
|
|
<h2 className="text-xl font-semibold mb-4">Color Information</h2>
|
|
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
|
|
{isError && (
|
|
<div className="p-4 bg-destructive/10 text-destructive rounded-lg">
|
|
<p className="font-medium">Error loading color information</p>
|
|
<p className="text-sm mt-1">{error?.message || 'Unknown error'}</p>
|
|
</div>
|
|
)}
|
|
|
|
{colorInfo && <ColorInfo info={colorInfo} />}
|
|
</div>
|
|
|
|
<div className="p-6 border rounded-lg bg-card">
|
|
<h2 className="text-xl font-semibold mb-4">Color Manipulation</h2>
|
|
<ManipulationPanel color={color} onColorChange={setColor} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|