Sebastian Krüger
cbaa4361cd
Features: - Created ConversionHistory component showing recent conversions - Displays input/output formats, file sizes, and timestamps - Relative time display (e.g., "5 minutes ago", "2 hours ago") - Clear all history functionality with confirmation - Individual history item removal - Real-time updates when new conversions complete - Custom event system for same-page updates - Storage event listener for cross-tab synchronization - Empty state with helpful messaging - Clean, organized card-based layout - Responsive design with proper spacing Technical improvements: - Enhanced history storage to dispatch custom events - History component auto-refreshes on new conversions - Maintains up to 10 most recent conversions - Integrated seamlessly into main page layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { FileConverter } from '@/components/converter/FileConverter';
|
|
import { ConversionHistory } from '@/components/converter/ConversionHistory';
|
|
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
|
import { ToastProvider } from '@/components/ui/Toast';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<ToastProvider>
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="border-b border-border">
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-foreground">Convert UI</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
File conversion in your browser
|
|
</p>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main content */}
|
|
<main className="container mx-auto px-4 py-8 md:py-16">
|
|
<div className="space-y-8">
|
|
<FileConverter />
|
|
<ConversionHistory />
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-border mt-16">
|
|
<div className="container mx-auto px-4 py-6 text-center text-sm text-muted-foreground">
|
|
<p>
|
|
Powered by{' '}
|
|
<a
|
|
href="https://github.com/ffmpegwasm/ffmpeg.wasm"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
FFmpeg.wasm
|
|
</a>
|
|
,{' '}
|
|
<a
|
|
href="https://github.com/dlemstra/magick-wasm"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
ImageMagick WASM
|
|
</a>
|
|
{' '}&{' '}
|
|
<a
|
|
href="https://nextjs.org"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
Next.js 16
|
|
</a>
|
|
</p>
|
|
<p className="mt-2">
|
|
All conversions happen locally in your browser. No files are uploaded to any server.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</ToastProvider>
|
|
);
|
|
}
|