feat: add templates, history, comparison mode, animations, and empty states
- Add text templates with 16 pre-made options across 4 categories (greeting, tech, fun, seasonal) - Add copy history panel tracking last 10 copied items with restore functionality - Add font comparison mode to view multiple fonts side-by-side (up to 6 fonts) - Add smooth animations: slide-down, slide-up, scale-in, fade-in, pulse, and shimmer - Add loading skeletons for better perceived performance - Add EmptyState component with contextual messages and icons - Add hover effects and transitions throughout the UI - Improve visual feedback with animated badges and shadows 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
53
lib/storage/history.ts
Normal file
53
lib/storage/history.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
'use client';
|
||||
|
||||
export interface HistoryItem {
|
||||
id: string;
|
||||
text: string;
|
||||
font: string;
|
||||
result: string;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
const HISTORY_KEY = 'figlet-ui-history';
|
||||
const MAX_HISTORY = 10;
|
||||
|
||||
export function getHistory(): HistoryItem[] {
|
||||
if (typeof window === 'undefined') return [];
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(HISTORY_KEY);
|
||||
return stored ? JSON.parse(stored) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function addToHistory(text: string, font: string, result: string): void {
|
||||
let history = getHistory();
|
||||
|
||||
const newItem: HistoryItem = {
|
||||
id: `${Date.now()}-${Math.random()}`,
|
||||
text,
|
||||
font,
|
||||
result,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
// Add to beginning
|
||||
history.unshift(newItem);
|
||||
|
||||
// Keep only MAX_HISTORY items
|
||||
history = history.slice(0, MAX_HISTORY);
|
||||
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
|
||||
}
|
||||
|
||||
export function clearHistory(): void {
|
||||
localStorage.removeItem(HISTORY_KEY);
|
||||
}
|
||||
|
||||
export function removeHistoryItem(id: string): void {
|
||||
const history = getHistory();
|
||||
const filtered = history.filter(item => item.id !== id);
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
|
||||
}
|
||||
Reference in New Issue
Block a user