Files
pastel-ui/app/batch/page.tsx

38 lines
1.4 KiB
TypeScript
Raw Normal View History

feat: implement accessibility tools and named colors explorer Add comprehensive accessibility features and color naming: **Color Utilities (lib/utils/color.ts):** - getRelativeLuminance() - WCAG 2.1 luminance calculation - getContrastRatio() - Contrast ratio between two colors - hexToRgb() - Convert hex to RGB - checkWCAGCompliance() - AA/AAA compliance checker - Full WCAG 2.1 specification implementation **New UI Component:** - Badge component - Status indicators - Variants: default, success, warning, destructive, outline - Used for pass/fail indicators - Accessible focus states **Accessibility Pages:** 1. Contrast Checker (/accessibility/contrast) - Dual color pickers (foreground/background) - Real-time contrast ratio calculation - Live text preview with both colors - WCAG 2.1 compliance display: - Level AA: Normal text (4.5:1), Large text (3:1), UI (3:1) - Level AAA: Normal text (7:1), Large text (4.5:1) - Pass/Fail badges for each criterion - Swap colors button - Visual feedback with color-coded results 2. Accessibility Dashboard (/accessibility) - Overview of all accessibility tools - Feature cards with icons - Educational content about WCAG 2.1 - Standards explanation (AA vs AAA) - Links to each tool **Named Colors Page (/names):** - Display all 148 CSS/X11 named colors - Search by name or hex value - Sort options (name, hue) - Responsive grid layout (2-6 columns) - Click to copy color - Color name and hex display - Loading and error states - Empty state for no results - Real-time filtering **Batch Operations Page (/batch):** - Placeholder "Coming Soon" page - Feature preview list - Planned capabilities description - Professional coming soon message **Features Implemented:** - Real WCAG calculations (not approximations) - Live contrast ratio updates - Interactive color swapping - Comprehensive compliance checking - Educational content - Named colors from API - Search and filtering - Responsive layouts **Build Status:** ✅ 11 pages successfully rendering ✅ All TypeScript checks passing ✅ No build errors All major sections now have functional or placeholder pages! Next: Polish, testing, and additional enhancements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 11:42:55 +01:00
import { FileUp } from 'lucide-react';
export default function BatchPage() {
return (
<div className="min-h-screen p-8">
<div className="max-w-7xl mx-auto space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Batch Operations</h1>
<p className="text-muted-foreground">
Process multiple colors at once with CSV/JSON upload
</p>
</div>
<div className="flex items-center justify-center min-h-[400px]">
<div className="text-center space-y-4">
<FileUp className="h-16 w-16 mx-auto text-muted-foreground" />
<h2 className="text-2xl font-semibold">Coming Soon</h2>
<p className="text-muted-foreground max-w-md">
Batch operations will allow you to upload CSV or JSON files with multiple colors
and apply transformations to all of them at once.
</p>
<div className="text-sm text-muted-foreground">
<p className="font-semibold mb-2">Planned features:</p>
<ul className="space-y-1">
<li> Upload CSV/JSON color lists</li>
<li> Bulk format conversion</li>
<li> Apply operations to all colors</li>
<li> Export results in multiple formats</li>
<li> Progress tracking for large batches</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
}