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

81
app/(app)/pastel/batch/page.tsx
View File

@@ -10,6 +10,7 @@ import {
SelectValue,
} from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { PaletteGrid } from '@/components/pastel/PaletteGrid';
import { ExportMenu } from '@/components/pastel/ExportMenu';
import { useLighten, useDarken, useSaturate, useDesaturate, useRotate } from '@/lib/pastel/api/queries';
@@ -102,27 +103,33 @@ export default function BatchPage() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Input */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Input Colors</h2>
<p className="text-sm text-muted-foreground mb-4">
Enter colors (one per line or comma-separated). Supports hex format
</p>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Input Colors</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground mb-4">
Enter colors (one per line or comma-separated). Supports hex format
</p>
<textarea
value={inputColors}
onChange={(e) => setInputColors(e.target.value)}
placeholder="#ff0099, #00ff99, #9900ff&#10;#ff5533&#10;#3355ff"
className="w-full h-48 p-3 border border-border rounded-xl bg-input font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50 transition-all duration-200"
/>
<textarea
value={inputColors}
onChange={(e) => setInputColors(e.target.value)}
placeholder="#ff0099, #00ff99, #9900ff&#10;#ff5533&#10;#3355ff"
className="w-full h-48 p-3 border border-border rounded-xl bg-input font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50 transition-all duration-200"
/>
<p className="text-xs text-muted-foreground mt-2">
{parseColors(inputColors).length} valid colors found
</p>
</div>
<p className="text-xs text-muted-foreground mt-2">
{parseColors(inputColors).length} valid colors found
</p>
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Operation</h2>
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Operation</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Select
value={operation}
onValueChange={(value) => setOperation(value as Operation)}
@@ -170,30 +177,38 @@ export default function BatchPage() {
</>
)}
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Output */}
<div className="space-y-6">
{outputColors.length > 0 ? (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">
Output Colors ({outputColors.length})
</h2>
<PaletteGrid colors={outputColors} />
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">
Output Colors ({outputColors.length})
</CardTitle>
</CardHeader>
<CardContent>
<PaletteGrid colors={outputColors} />
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<ExportMenu colors={outputColors} />
</div>
<Card>
<CardContent className="pt-6">
<ExportMenu colors={outputColors} />
</CardContent>
</Card>
</>
) : (
<div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
<Download className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>Enter colors and click Process to see results</p>
</div>
<Card>
<CardContent className="p-12 text-center text-muted-foreground">
<Download className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>Enter colors and click Process to see results</p>
</CardContent>
</Card>
)}
</div>
</div>