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

59
app/(app)/pastel/harmony/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 { useGeneratePalette } from '@/lib/pastel/api/queries';
import { Loader2, Palette } from 'lucide-react';
import { toast } from 'sonner';
@@ -70,14 +71,20 @@ export default function HarmonyPage() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Controls */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Base Color</h2>
<ColorPicker color={baseColor} onChange={setBaseColor} />
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Base Color</CardTitle>
</CardHeader>
<CardContent>
<ColorPicker color={baseColor} onChange={setBaseColor} />
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Harmony Type</h2>
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Harmony Type</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Select
value={harmonyType}
onValueChange={(value) => setHarmonyType(value as HarmonyType)}
@@ -116,32 +123,40 @@ export default function HarmonyPage() {
</>
)}
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Results */}
<div className="space-y-6">
{palette.length > 0 && (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">
Generated Palette ({palette.length} colors)
</h2>
<PaletteGrid colors={palette} />
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">
Generated Palette ({palette.length} colors)
</CardTitle>
</CardHeader>
<CardContent>
<PaletteGrid colors={palette} />
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<ExportMenu colors={palette} />
</div>
<Card>
<CardContent className="pt-6">
<ExportMenu colors={palette} />
</CardContent>
</Card>
</>
)}
{palette.length === 0 && (
<div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
<Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>Select a harmony type and click Generate to create your palette</p>
</div>
<Card>
<CardContent className="p-12 text-center text-muted-foreground">
<Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>Select a harmony type and click Generate to create your palette</p>
</CardContent>
</Card>
)}
</div>
</div>