feat: initialize Convert UI - browser-based file conversion app
- Add Next.js 16 with Turbopack and React 19 - Add Tailwind CSS 4 with OKLCH color system - Implement FFmpeg.wasm for video/audio conversion - Implement ImageMagick WASM for image conversion - Add file upload with drag-and-drop - Add format selector with fuzzy search - Add conversion preview and download - Add conversion history with localStorage - Add dark/light theme support - Support 22+ file formats across video, audio, and images 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
69
app/page.tsx
Normal file
69
app/page.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { FileConverter } from '@/components/converter/FileConverter';
|
||||
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">
|
||||
<FileConverter />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user