144 lines
4.7 KiB
TypeScript
144 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { PaletteGrid } from '@/components/pastel/PaletteGrid';
|
|
import { ExportMenu } from '@/components/pastel/ExportMenu';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { useGenerateDistinct } from '@/lib/pastel/api/queries';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
export default function DistinctPage() {
|
|
const [count, setCount] = useState(8);
|
|
const [metric, setMetric] = useState<'cie76' | 'ciede2000'>('ciede2000');
|
|
const [colors, setColors] = useState<string[]>([]);
|
|
|
|
const generateMutation = useGenerateDistinct();
|
|
|
|
const handleGenerate = async () => {
|
|
try {
|
|
const result = await generateMutation.mutateAsync({
|
|
count,
|
|
metric,
|
|
});
|
|
setColors(result.colors);
|
|
toast.success(`Generated ${result.colors.length} distinct colors`);
|
|
} catch (error) {
|
|
toast.error('Failed to generate distinct colors');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen py-12">
|
|
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-2">Distinct Colors Generator</h1>
|
|
<p className="text-muted-foreground">
|
|
Generate visually distinct colors using simulated annealing
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Controls */}
|
|
<div className="lg:col-span-1">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Settings</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-6">
|
|
<div>
|
|
<label htmlFor="count" className="text-sm font-medium mb-2 block">
|
|
Number of Colors
|
|
</label>
|
|
<Input
|
|
id="count"
|
|
type="number"
|
|
min={2}
|
|
max={100}
|
|
value={count}
|
|
onChange={(e) => setCount(parseInt(e.target.value))}
|
|
/>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Higher counts take longer to generate
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium block">
|
|
Distance Metric
|
|
</label>
|
|
<Select
|
|
value={metric}
|
|
onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select metric" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="cie76">CIE76 (Faster)</SelectItem>
|
|
<SelectItem value="ciede2000">CIEDE2000 (More Accurate)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleGenerate}
|
|
disabled={generateMutation.isPending}
|
|
className="w-full"
|
|
>
|
|
{generateMutation.isPending ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Generating..
|
|
</>
|
|
) : (
|
|
'Generate Colors'
|
|
)}
|
|
</Button>
|
|
|
|
{generateMutation.isPending && (
|
|
<div className="text-sm text-muted-foreground text-center">
|
|
This may take a few moments..
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Results */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
Generated Colors {colors.length > 0 && `(${colors.length})`}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<PaletteGrid colors={colors} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{colors.length > 0 && (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<ExportMenu colors={colors} />
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|