Major UX enhancements for better user feedback and discovery: **Toast Notification System** - Beautiful toast notifications with 3 types (success/error/info) - Auto-dismiss after 3 seconds - Slide-in animation from right - Color-coded by type (green/red/blue) - Dark mode support - Close button for manual dismiss - ToastProvider context for global access - Non-blocking UI overlay **Random Font Discovery** - Shuffle button in font selector - One-click random font selection - Toast notification shows selected font - Perfect for discovering new fonts - Located next to "Select Font" header **Enhanced Font Preview** - Font name badge display - Character count statistics - Line count statistics - Better visual hierarchy - Responsive stat display **Improved Feedback** - Toast on copy: "Copied to clipboard!" - Toast on share: "Shareable URL copied!" - Toast on random: "Random font: FontName" - Error toasts for failed operations - Removed temporary text replacement **Smooth Animations** - Slide-in animation for toasts - Fade-in animation class - Custom keyframe animations - CSS utility classes - Smooth transitions throughout **Technical Improvements** - useToast custom hook - Context-based state management - Auto-cleanup with setTimeout - Unique toast IDs - TypeScript types for toast system - Proper event propagation **Better UX** - No more jarring text replacements - Non-intrusive notifications - Professional feedback system - Discoverable random feature - Informative preview stats The app now feels polished and professional with proper user feedback! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
32 lines
939 B
TypeScript
32 lines
939 B
TypeScript
import type { Metadata } from 'next';
|
|
import './globals.css';
|
|
import { ToastProvider } from '@/components/ui/Toast';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Figlet UI - ASCII Art Text Generator',
|
|
description: 'A modern web UI for generating ASCII art text with 373 figlet fonts. Preview custom text in any figlet font, export to multiple formats, and share your creations.',
|
|
keywords: ['figlet', 'ascii art', 'text generator', 'banner', 'ascii', 'text art'],
|
|
authors: [{ name: 'Valknar' }],
|
|
openGraph: {
|
|
title: 'Figlet UI - ASCII Art Text Generator',
|
|
description: 'Generate beautiful ASCII art text with 373 fonts',
|
|
type: 'website',
|
|
},
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en">
|
|
<body className="antialiased">
|
|
<ToastProvider>
|
|
{children}
|
|
</ToastProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|