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

119
app/(app)/pastel/gradient/page.tsx
View File

@@ -6,6 +6,7 @@ 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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useGenerateGradient } from '@/lib/pastel/api/queries';
import { Loader2, Plus, X } from 'lucide-react';
import { toast } from 'sonner';
@@ -59,39 +60,45 @@ export default function GradientPage() {
<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">Color Stops</h2>
<div className="space-y-4">
{stops.map((stop, index) => (
<div key={index} className="flex items-start gap-3">
<div className="flex-1">
<ColorPicker
color={stop}
onChange={(color) => updateStop(index, color)}
/>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Color Stops</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-4">
{stops.map((stop, index) => (
<div key={index} className="flex items-start gap-3">
<div className="flex-1">
<ColorPicker
color={stop}
onChange={(color) => updateStop(index, color)}
/>
</div>
{stops.length > 2 && (
<Button
variant="ghost"
size="icon"
onClick={() => removeStop(index)}
className="mt-8"
>
<X className="h-4 w-4" />
</Button>
)}
</div>
{stops.length > 2 && (
<Button
variant="ghost"
size="icon"
onClick={() => removeStop(index)}
className="mt-8"
>
<X className="h-4 w-4" />
</Button>
)}
</div>
))}
<Button onClick={addStop} variant="outline" className="w-full">
<Plus className="h-4 w-4 mr-2" />
Add Stop
</Button>
</div>
</div>
))}
<Button onClick={addStop} variant="outline" className="w-full">
<Plus className="h-4 w-4 mr-2" />
Add Stop
</Button>
</div>
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Settings</h2>
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Settings</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<label htmlFor="count" className="text-sm font-medium mb-2 block">
Number of Colors
@@ -120,34 +127,44 @@ export default function GradientPage() {
'Generate Gradient'
)}
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Preview */}
<div className="space-y-6">
{gradient && gradient.length > 0 && (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Gradient Preview</h2>
<div
className="h-32 rounded-lg"
style={{
background: `linear-gradient(to right, ${gradient.join(', ')})`,
}}
/>
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Gradient Preview</CardTitle>
</CardHeader>
<CardContent>
<div
className="h-32 rounded-lg"
style={{
background: `linear-gradient(to right, ${gradient.join(', ')})`,
}}
/>
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">
Colors ({gradient.length})
</h2>
<PaletteGrid colors={gradient} />
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">
Colors ({gradient.length})
</CardTitle>
</CardHeader>
<CardContent>
<PaletteGrid colors={gradient} />
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<ExportMenu colors={gradient} />
</div>
<Card>
<CardContent className="pt-6">
<ExportMenu colors={gradient} />
</CardContent>
</Card>
</>
)}
</div>