valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use shadcn Card component in pastel app

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-25 13:35:29 +01:00
parent 57ba63aa32
commit 4ccf316184
9 changed files with 608 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
app/(app)/pastel/distinct/page.tsx
View File

@@ -12,6 +12,7 @@ import {
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';
@@ -49,82 +50,90 @@ export default function DistinctPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Controls */}
<div className="lg:col-span-1">
<div className="p-6 border rounded-lg bg-card space-y-6">
<div>
<h2 className="text-sm font-medium mb-4">Settings</h2>
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Settings</CardTitle>
</CardHeader>
<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..
<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>
<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">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">
Generated Colors {colors.length > 0 && `(${colors.length})`}
</h2>
<PaletteGrid colors={colors} />
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">
Generated Colors {colors.length > 0 && `(${colors.length})`}
</CardTitle>
</CardHeader>
<CardContent>
<PaletteGrid colors={colors} />
</CardContent>
</Card>
{colors.length > 0 && (
<div className="p-6 border rounded-lg bg-card">
<ExportMenu colors={colors} />
</div>
<Card>
<CardContent className="pt-6">
<ExportMenu colors={colors} />
</CardContent>
</Card>
)}
</div>
</div>