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

97
app/(app)/pastel/contrast/page.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
import { ColorPicker } from '@/components/pastel/ColorPicker';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/utils/color';
import { ArrowLeftRight, Check, X } from 'lucide-react';
@@ -68,12 +69,14 @@ export default function ContrastPage() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Color Pickers */}
<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">Foreground Color</h2>
</div>
<ColorPicker color={foreground} onChange={setForeground} />
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Foreground Color</CardTitle>
</CardHeader>
<CardContent>
<ColorPicker color={foreground} onChange={setForeground} />
</CardContent>
</Card>
<div className="flex justify-center">
<Button
@@ -86,50 +89,64 @@ export default function ContrastPage() {
</Button>
</div>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Background Color</h2>
<ColorPicker color={background} onChange={setBackground} />
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Background Color</CardTitle>
</CardHeader>
<CardContent>
<ColorPicker color={background} onChange={setBackground} />
</CardContent>
</Card>
</div>
{/* Results */}
<div className="space-y-6">
{/* Preview */}
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Preview</h2>
<div
className="rounded-lg p-8 text-center"
style={{ backgroundColor: background, color: foreground }}
>
<p className="text-xl font-bold mb-2">Normal Text (16px)</p>
<p className="text-3xl font-bold">Large Text (24px)</p>
</div>
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Preview</CardTitle>
</CardHeader>
<CardContent>
<div
className="rounded-lg p-8 text-center"
style={{ backgroundColor: background, color: foreground }}
>
<p className="text-xl font-bold mb-2">Normal Text (16px)</p>
<p className="text-3xl font-bold">Large Text (24px)</p>
</div>
</CardContent>
</Card>
{/* Contrast Ratio */}
{ratio !== null && (
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">Contrast Ratio</h2>
<div className="text-center mb-6">
<div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
<p className="text-sm text-muted-foreground mt-2">
{ratio >= 7
? 'Excellent contrast'
: ratio >= 4.5
? 'Good contrast'
: ratio >= 3
? 'Minimum contrast'
: 'Poor contrast'}
</p>
</div>
</div>
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">Contrast Ratio</CardTitle>
</CardHeader>
<CardContent>
<div className="text-center mb-6">
<div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
<p className="text-sm text-muted-foreground mt-2">
{ratio >= 7
? 'Excellent contrast'
: ratio >= 4.5
? 'Good contrast'
: ratio >= 3
? 'Minimum contrast'
: 'Poor contrast'}
</p>
</div>
</CardContent>
</Card>
)}
{/* WCAG Compliance */}
{compliance && (
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-sm font-medium mb-4">WCAG 2.1 Compliance</h2>
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle className="text-sm font-medium">WCAG 2.1 Compliance</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<h3 className="text-sm font-semibold mb-2">Level AA</h3>
<div className="space-y-2">
@@ -161,8 +178,8 @@ export default function ContrastPage() {
/>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
)}
</div>
</div>