93889ab9bd
Fix API response format mismatches and implement all remaining features: **API Integration Fixes:** - Fix ManipulationPanel to use `colors` instead of `results` from API responses - Fix gradient endpoint to use `gradient` array from API response - Fix color blindness simulator to use correct field names (`input`/`output` vs `original`/`simulated`) - Fix text color optimizer request field (`backgrounds` vs `background_colors`) - Fix method name casing: `simulateColorBlindness` (capital B) - Add palette generation endpoint integration **Type Definition Updates:** - Update GradientData to match API structure with `gradient` array - Update ColorBlindnessData to use `colors` with `input`/`output`/`difference_percentage` - Update TextColorData to use `colors` with `textcolor`/`wcag_aa`/`wcag_aaa` fields - Add PaletteGenerateRequest and PaletteGenerateData types **Completed Features:** - Harmony Palettes: Now uses dedicated `/palettes/generate` API endpoint - Simplified from 80 lines of manual color theory to single API call - Supports 6 harmony types: monochromatic, analogous, complementary, split-complementary, triadic, tetradic - Text Color Optimizer: Full implementation with WCAG compliance checking - Automatic black/white text color selection - Live preview with contrast ratios - AA/AAA compliance indicators - Color Blindness Simulator: Fixed and working - Shows difference percentage for each simulation - Side-by-side comparison view - Gradient Creator: Fixed to use correct API response structure - Batch Operations: Fixed to extract output colors correctly **UI Improvements:** - Enable all accessibility tool cards (remove "Coming Soon" badges) - Enable harmony palettes card - Add safety check for gradient state to prevent undefined errors All features now fully functional and properly integrated with Pastel API. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import Link from 'next/link';
|
|
import { Palette, Sparkles, GraduationCap } from 'lucide-react';
|
|
|
|
export default function PalettesPage() {
|
|
const paletteTypes = [
|
|
{
|
|
title: 'Gradient Creator',
|
|
description: 'Create smooth color gradients with multiple stops and color spaces',
|
|
href: '/palettes/gradient',
|
|
icon: GraduationCap,
|
|
features: ['Multiple color stops', 'Various color spaces', 'Live preview'],
|
|
},
|
|
{
|
|
title: 'Distinct Colors',
|
|
description: 'Generate visually distinct colors using simulated annealing algorithm',
|
|
href: '/palettes/distinct',
|
|
icon: Sparkles,
|
|
features: ['Perceptual distance', 'Configurable count', 'Quality metrics'],
|
|
},
|
|
{
|
|
title: 'Harmony Palettes',
|
|
description: 'Create color palettes based on color theory and harmony rules',
|
|
href: '/palettes/harmony',
|
|
icon: Palette,
|
|
features: ['Color theory', 'Multiple schemes', 'Instant generation'],
|
|
},
|
|
];
|
|
|
|
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">Palette Generation</h1>
|
|
<p className="text-muted-foreground">
|
|
Create beautiful color palettes using various generation methods
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{paletteTypes.map((type) => {
|
|
const Icon = type.icon;
|
|
return (
|
|
<Link
|
|
key={type.href}
|
|
href={type.comingSoon ? '#' : type.href}
|
|
className={`p-6 border rounded-lg bg-card hover:border-primary transition-colors ${
|
|
type.comingSoon ? 'opacity-60 cursor-not-allowed' : ''
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<Icon className="h-8 w-8 text-primary" />
|
|
{type.comingSoon && (
|
|
<span className="text-xs bg-muted px-2 py-1 rounded">Coming Soon</span>
|
|
)}
|
|
</div>
|
|
<h2 className="text-xl font-semibold mb-2">{type.title}</h2>
|
|
<p className="text-sm text-muted-foreground mb-4">{type.description}</p>
|
|
<ul className="space-y-1">
|
|
{type.features.map((feature) => (
|
|
<li key={feature} className="text-sm text-muted-foreground flex items-center">
|
|
<span className="mr-2">•</span>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|