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>
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Copy, Download } from 'lucide-react';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
export interface FontPreviewProps {
|
|
text: string;
|
|
isLoading?: boolean;
|
|
onCopy?: () => void;
|
|
onDownload?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function FontPreview({ text, isLoading, onCopy, onDownload, className }: FontPreviewProps) {
|
|
return (
|
|
<Card className={cn('relative', className)}>
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-sm font-medium">Preview</h3>
|
|
<div className="flex gap-2">
|
|
{onCopy && (
|
|
<Button variant="outline" size="sm" onClick={onCopy}>
|
|
<Copy className="h-4 w-4" />
|
|
Copy
|
|
</Button>
|
|
)}
|
|
{onDownload && (
|
|
<Button variant="outline" size="sm" onClick={onDownload}>
|
|
<Download className="h-4 w-4" />
|
|
Download
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative min-h-[200px] bg-muted/50 rounded-lg p-4 overflow-x-auto">
|
|
{isLoading ? (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-sm text-muted-foreground">Generating...</div>
|
|
</div>
|
|
) : text ? (
|
|
<pre className="font-mono text-xs sm:text-sm whitespace-pre overflow-x-auto">
|
|
{text}
|
|
</pre>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-sm text-muted-foreground">Your ASCII art will appear here</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|