Sebastian Krüger
753ed17e4b
Implemented Phases 2-4 of the implementation plan: **Phase 2: Font Management System** - Created font loading service with caching - Added API route to list all 373 figlet fonts - Implemented font metadata types **Phase 3: Core Figlet Engine** - Built figlet.js wrapper service for ASCII art generation - Added async/sync rendering methods - Implemented debounced text updates (300ms) - Created utility functions (cn, debounce) **Phase 4: Main UI Components** - Built reusable UI primitives (Button, Input, Card) - Created TextInput component with character counter (100 char limit) - Implemented FontPreview with loading states - Added FontSelector with real-time search - Built main FigletConverter orchestrating all components **Features Implemented:** - Live preview with 300ms debounce - 373 fonts from xero/figlet-fonts collection - Fuzzy font search - Copy to clipboard - Download as .txt file - Responsive 3-column layout (mobile-friendly) - Character counter - Loading states - Empty states **Tech Stack:** - Next.js 16 App Router with Turbopack - React 19 with client components - TypeScript with strict types - Tailwind CSS 4 for styling - figlet.js for rendering - Font caching for performance The application is fully functional and ready for testing! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { FigletConverter } from '@/components/converter/FigletConverter';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main className="min-h-screen p-4 sm:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<header className="mb-8">
|
|
<h1 className="text-3xl sm:text-4xl font-bold mb-2">Figlet UI</h1>
|
|
<p className="text-sm sm:text-base text-muted-foreground">
|
|
ASCII Art Text Generator with 373 Fonts
|
|
</p>
|
|
</header>
|
|
|
|
<FigletConverter />
|
|
|
|
<footer className="mt-12 pt-8 border-t text-center text-sm text-muted-foreground">
|
|
<p>
|
|
Powered by{' '}
|
|
<a
|
|
href="https://github.com/patorjk/figlet.js"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-foreground"
|
|
>
|
|
figlet.js
|
|
</a>
|
|
{' '}·{' '}
|
|
Fonts from{' '}
|
|
<a
|
|
href="https://github.com/xero/figlet-fonts"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-foreground"
|
|
>
|
|
xero/figlet-fonts
|
|
</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|