Sebastian Krüger
7f7bc69d04
Add final layer of advanced features for spectacular UX: ⌨️ Command Palette (CommandPalette.tsx): - Trigger with Ctrl/Cmd+K keyboard shortcut - Search and execute commands instantly - Quick access to all 23 measurement categories - Theme switching commands (light/dark/system) - Keyboard navigation (↑/↓ arrows, Enter to select) - Escape to close - Color-coded category commands - Backdrop blur overlay - Animated scale-in entrance - Footer with keyboard hints - Smart filtering by keywords 📊 Visual Comparison (VisualComparison.tsx): - Toggle between grid and chart view - Horizontal bar chart showing magnitude differences - Animated bars with 500ms transitions - Auto-calculated percentages relative to max value - Color-coded bars matching category colors - Tabular number formatting - Clean, minimal design 🔄 Unit Swap Functionality: - Swap button between From/To units - ArrowLeftRight icon - Automatically converts value on swap - Two-unit quick converter mode - Large result display with color accent - Responsive layout 📱 Footer Component (Footer.tsx): - Three-column grid layout (About, Features, Links) - GitHub repository link - convert-units library attribution - Keyboard shortcuts reference - Feature highlights - Made with ❤️ message - Responsive design (stacks on mobile) - Copyright notice with current year - Smooth hover transitions 🎨 Enhanced MainConverter: - From/To unit selector with swap button - Quick result display between selectors - Toggle between grid and chart views - BarChart3 icon for view switcher - Integrated command palette - Better spacing and layout - Target unit state management - Auto-update target unit on measure change ✨ Enhanced Page Layout: - Sticky header with backdrop blur - Flexbox layout for footer at bottom - Keyboard shortcuts hint (/ and Ctrl+K) - Improved header spacing - Better visual hierarchy Features Now Complete: ✅ Command palette with Ctrl+K ✅ Visual comparison bar charts ✅ Unit swap functionality ✅ Professional footer ✅ From/To quick converter ✅ Chart/Grid view toggle ✅ Sticky navigation header ✅ Full keyboard navigation The app is now feature-complete with: - 23 measurement categories - 187 individual units - Real-time conversion - Fuzzy search (/) - Command palette (Ctrl+K) - Dark mode - Conversion history - Favorites & copy - Visual comparisons - Unit swapping - Complete footer 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import MainConverter from '@/components/converter/MainConverter';
|
|
import { ThemeToggle } from '@/components/ui/ThemeToggle';
|
|
import Footer from '@/components/ui/Footer';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen bg-background flex flex-col">
|
|
{/* Header with theme toggle */}
|
|
<div className="border-b sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-40">
|
|
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div className="text-xl font-bold">Units UI</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
|
|
<main className="container mx-auto px-4 py-8 flex-1">
|
|
<header className="text-center mb-12">
|
|
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
|
|
Unit Converter
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
Convert between 187 units across 23 measurement categories
|
|
</p>
|
|
<div className="flex items-center justify-center gap-4 mt-3 text-sm text-muted-foreground">
|
|
<span>Press <kbd className="px-2 py-1 bg-muted rounded text-xs">/</kbd> to search</span>
|
|
<span>•</span>
|
|
<span>
|
|
<kbd className="px-2 py-1 bg-muted rounded text-xs">Ctrl</kbd>
|
|
{' + '}
|
|
<kbd className="px-2 py-1 bg-muted rounded text-xs">K</kbd> for commands
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<MainConverter />
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|