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

131
app/(app)/pastel/colorblind/page.tsx
View File

@@ -11,6 +11,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useSimulateColorBlindness } from '@/lib/pastel/api/queries';
import { Loader2, Eye, Plus, X } from 'lucide-react';
import { toast } from 'sonner';
@@ -77,9 +78,9 @@ export default function ColorBlindPage() {
<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">
<div className="flex items-center justify-between mb-4">
<h2 className="text-sm font-medium">Colors to Test</h2>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0">
<CardTitle className="text-sm font-medium">Colors to Test</CardTitle>
<Button
onClick={addColor}
variant="outline"
@@ -89,9 +90,9 @@ export default function ColorBlindPage() {
<Plus className="h-4 w-4 mr-2" />
Add Color
</Button>
</div>
</CardHeader>
<div className="space-y-4">
<CardContent className="space-y-4">
{colors.map((color, index) => (
<div key={index} className="flex items-start gap-3">
<div className="flex-1">
@@ -112,12 +113,14 @@ export default function ColorBlindPage() {
)}
</div>
))}
</div>
</div>
</CardContent>
</Card>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Blindness Type</h2>
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Blindness Type</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Select
value={blindnessType}
onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)}
@@ -153,68 +156,76 @@ export default function ColorBlindPage() {
</>
)}
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Results */}
<div className="space-y-6">
{simulations.length > 0 ? (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Simulation Results</h2>
<p className="text-sm text-muted-foreground mb-6">
Compare original colors (left) with how they appear to people with{' '}
{blindnessType} (right)
</p>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Simulation Results</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground mb-2">
Compare original colors (left) with how they appear to people with{' '}
{blindnessType} (right)
</p>
<div className="space-y-4">
{simulations.map((sim, index) => (
<div
key={index}
className="grid grid-cols-2 gap-4 p-4 bg-muted/50 rounded-lg"
>
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">
Original
</p>
<div className="flex items-center gap-3">
<ColorDisplay color={sim.input} size="md" />
<code className="text-sm font-mono">{sim.input}</code>
<div className="space-y-4">
{simulations.map((sim, index) => (
<div
key={index}
className="grid grid-cols-2 gap-4 p-4 bg-muted/50 rounded-lg"
>
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">
Original
</p>
<div className="flex items-center gap-3">
<ColorDisplay color={sim.input} size="md" />
<code className="text-sm font-mono">{sim.input}</code>
</div>
</div>
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">
As Seen ({sim.difference_percentage.toFixed(1)}% difference)
</p>
<div className="flex items-center gap-3">
<ColorDisplay color={sim.output} size="md" />
<code className="text-sm font-mono">{sim.output}</code>
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">
As Seen ({sim.difference_percentage.toFixed(1)}% difference)
</p>
<div className="flex items-center gap-3">
<ColorDisplay color={sim.output} size="md" />
<code className="text-sm font-mono">{sim.output}</code>
</div>
</div>
</div>
))}
</div>
</div>
<div className="p-6 border rounded-lg bg-card bg-blue-50 dark:bg-blue-950/20">
<h3 className="font-semibold mb-2 flex items-center gap-2">
<Eye className="h-5 w-5" />
Accessibility Tip
</h3>
<p className="text-sm text-muted-foreground">
Ensure important information isn&apos;t conveyed by color alone. Use text
labels, patterns, or icons to make your design accessible to everyone
</p>
</div>
<Card className="bg-blue-50 dark:bg-blue-950/20 border-blue-100 dark:border-blue-900/30 shadow-none">
<CardContent className="pt-6">
<h3 className="font-semibold mb-2 flex items-center gap-2">
<Eye className="h-5 w-5" />
Accessibility Tip
</h3>
<p className="text-sm text-muted-foreground">
Ensure important information isn&apos;t conveyed by color alone. Use text
labels, patterns, or icons to make your design accessible to everyone
</p>
</CardContent>
</Card>
</>
) : (
<div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
<Eye className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>Add colors and click Simulate to see how they appear</p>
<p className="text-sm mt-2">with different types of color blindness</p>
</div>
<Card>
<CardContent className="p-12 text-center text-muted-foreground">
<Eye className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>Add colors and click Simulate to see how they appear</p>
<p className="text-sm mt-2">with different types of color blindness</p>
</CardContent>
</Card>
)}
</div>
</div>