refactor: streamline toast system and harmonize UI across tools
- Migrate all toast notifications to sonner and remove custom ToastProvider - Align Card and TextInput styling across Figlet and Pastel (rounded-lg, border-based) - Fix build error by removing non-existent export in lib/units/index.ts - Clean up unused Figlet components and constants
This commit is contained in:
@@ -1,124 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Copy, X, Download, GitCompare } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import type { FigletFont } from '@/types/figlet';
|
||||
|
||||
export interface ComparisonModeProps {
|
||||
text: string;
|
||||
selectedFonts: string[];
|
||||
fontResults: Record<string, string>;
|
||||
onRemoveFont: (fontName: string) => void;
|
||||
onCopyFont: (fontName: string, result: string) => void;
|
||||
onDownloadFont: (fontName: string, result: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ComparisonMode({
|
||||
text,
|
||||
selectedFonts,
|
||||
fontResults,
|
||||
onRemoveFont,
|
||||
onCopyFont,
|
||||
onDownloadFont,
|
||||
className,
|
||||
}: ComparisonModeProps) {
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Font Comparison</h2>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{selectedFonts.length} font{selectedFonts.length !== 1 ? 's' : ''} selected
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{selectedFonts.length === 0 ? (
|
||||
<Card>
|
||||
<EmptyState
|
||||
icon={GitCompare}
|
||||
title="No fonts selected for comparison"
|
||||
description="Click the + icon next to any font in the font selector to add it to the comparison"
|
||||
className="py-12"
|
||||
/>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{selectedFonts.map((fontName, index) => (
|
||||
<Card
|
||||
key={fontName}
|
||||
className="relative scale-in"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Font Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-mono font-semibold px-2 py-1 bg-primary/10 text-primary rounded">
|
||||
{fontName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onCopyFont(fontName, fontResults[fontName] || '')}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onDownloadFont(fontName, fontResults[fontName] || '')}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Download"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemoveFont(fontName)}
|
||||
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
|
||||
title="Remove from comparison"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ASCII Art Preview */}
|
||||
<div className="relative">
|
||||
<pre className="p-4 bg-muted rounded-md overflow-x-auto">
|
||||
<code className="text-xs font-mono whitespace-pre">
|
||||
{fontResults[fontName] || 'Loading...'}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{fontResults[fontName] && (
|
||||
<div className="flex gap-4 text-xs text-muted-foreground">
|
||||
<span>
|
||||
{fontResults[fontName].split('\n').length} lines
|
||||
</span>
|
||||
<span>
|
||||
{Math.max(
|
||||
...fontResults[fontName].split('\n').map((line) => line.length)
|
||||
)} chars wide
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,20 +4,12 @@ import * as React from 'react';
|
||||
import { TextInput } from './TextInput';
|
||||
import { FontPreview } from './FontPreview';
|
||||
import { FontSelector } from './FontSelector';
|
||||
import { TextTemplates } from './TextTemplates';
|
||||
import { HistoryPanel } from './HistoryPanel';
|
||||
import { ComparisonMode } from './ComparisonMode';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { GitCompare } from 'lucide-react';
|
||||
import { textToAscii } from '@/lib/figlet/figletService';
|
||||
import { getFontList } from '@/lib/figlet/fontLoader';
|
||||
import { debounce } from '@/lib/utils/debounce';
|
||||
import { addRecentFont } from '@/lib/storage/favorites';
|
||||
import { addToHistory, type HistoryItem } from '@/lib/storage/history';
|
||||
import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { toast } from 'sonner';
|
||||
import type { FigletFont } from '@/types/figlet';
|
||||
|
||||
export function FigletConverter() {
|
||||
@@ -26,10 +18,6 @@ export function FigletConverter() {
|
||||
const [asciiArt, setAsciiArt] = React.useState('');
|
||||
const [fonts, setFonts] = React.useState<FigletFont[]>([]);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [isComparisonMode, setIsComparisonMode] = React.useState(false);
|
||||
const [comparisonFonts, setComparisonFonts] = React.useState<string[]>([]);
|
||||
const [comparisonResults, setComparisonResults] = React.useState<Record<string, string>>({});
|
||||
const { addToast } = useToast();
|
||||
|
||||
// Load fonts and check URL params on mount
|
||||
React.useEffect(() => {
|
||||
@@ -83,11 +71,10 @@ export function FigletConverter() {
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(asciiArt);
|
||||
addToHistory(text, selectedFont, asciiArt);
|
||||
addToast('Copied to clipboard!', 'success');
|
||||
toast.success('Copied to clipboard!');
|
||||
} catch (error) {
|
||||
console.error('Failed to copy:', error);
|
||||
addToast('Failed to copy', 'error');
|
||||
toast.error('Failed to copy');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -112,10 +99,10 @@ export function FigletConverter() {
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareUrl);
|
||||
addToast('Shareable URL copied!', 'success');
|
||||
toast.success('Shareable URL copied!');
|
||||
} catch (error) {
|
||||
console.error('Failed to copy URL:', error);
|
||||
addToast('Failed to copy URL', 'error');
|
||||
toast.error('Failed to copy URL');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -124,164 +111,40 @@ export function FigletConverter() {
|
||||
if (fonts.length === 0) return;
|
||||
const randomIndex = Math.floor(Math.random() * fonts.length);
|
||||
setSelectedFont(fonts[randomIndex].name);
|
||||
addToast(`Random font: ${fonts[randomIndex].name}`, 'info');
|
||||
toast.info(`Random font: ${fonts[randomIndex].name}`);
|
||||
};
|
||||
|
||||
const handleSelectTemplate = (templateText: string) => {
|
||||
setText(templateText);
|
||||
addToast(`Template applied: ${templateText}`, 'info');
|
||||
};
|
||||
|
||||
const handleSelectHistory = (item: HistoryItem) => {
|
||||
setText(item.text);
|
||||
setSelectedFont(item.font);
|
||||
addToast(`Restored from history`, 'info');
|
||||
};
|
||||
|
||||
// Comparison mode handlers
|
||||
const handleToggleComparisonMode = () => {
|
||||
const newMode = !isComparisonMode;
|
||||
setIsComparisonMode(newMode);
|
||||
if (newMode && comparisonFonts.length === 0) {
|
||||
// Initialize with current font
|
||||
setComparisonFonts([selectedFont]);
|
||||
}
|
||||
addToast(newMode ? 'Comparison mode enabled' : 'Comparison mode disabled', 'info');
|
||||
};
|
||||
|
||||
const handleAddToComparison = (fontName: string) => {
|
||||
if (comparisonFonts.includes(fontName)) {
|
||||
addToast('Font already in comparison', 'info');
|
||||
return;
|
||||
}
|
||||
if (comparisonFonts.length >= 6) {
|
||||
addToast('Maximum 6 fonts for comparison', 'info');
|
||||
return;
|
||||
}
|
||||
setComparisonFonts([...comparisonFonts, fontName]);
|
||||
addToast(`Added ${fontName} to comparison`, 'success');
|
||||
};
|
||||
|
||||
const handleRemoveFromComparison = (fontName: string) => {
|
||||
setComparisonFonts(comparisonFonts.filter((f) => f !== fontName));
|
||||
addToast(`Removed ${fontName} from comparison`, 'info');
|
||||
};
|
||||
|
||||
const handleCopyComparisonFont = async (fontName: string, result: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(result);
|
||||
addToHistory(text, fontName, result);
|
||||
addToast(`Copied ${fontName} to clipboard!`, 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to copy:', error);
|
||||
addToast('Failed to copy', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadComparisonFont = (fontName: string, result: string) => {
|
||||
const blob = new Blob([result], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `figlet-${fontName}-${Date.now()}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// Generate comparison results
|
||||
React.useEffect(() => {
|
||||
if (!isComparisonMode || comparisonFonts.length === 0 || !text) return;
|
||||
|
||||
const generateComparisons = async () => {
|
||||
const results: Record<string, string> = {};
|
||||
for (const fontName of comparisonFonts) {
|
||||
try {
|
||||
results[fontName] = await textToAscii(text, fontName);
|
||||
} catch (error) {
|
||||
console.error(`Error generating ASCII art for ${fontName}:`, error);
|
||||
results[fontName] = 'Error generating ASCII art';
|
||||
}
|
||||
}
|
||||
setComparisonResults(results);
|
||||
};
|
||||
|
||||
generateComparisons();
|
||||
}, [isComparisonMode, comparisonFonts, text]);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch lg:max-h-[800px]">
|
||||
{/* Left Column - Input and Preview */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Comparison Mode Toggle */}
|
||||
<Card className="scale-in">
|
||||
<div className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GitCompare className={cn(
|
||||
"h-4 w-4",
|
||||
isComparisonMode ? "text-primary" : "text-muted-foreground"
|
||||
)} />
|
||||
<span className="text-sm font-medium">Comparison Mode</span>
|
||||
{isComparisonMode && comparisonFonts.length > 0 && (
|
||||
<span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full font-medium slide-down">
|
||||
{comparisonFonts.length} {comparisonFonts.length === 1 ? 'font' : 'fonts'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant={isComparisonMode ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={handleToggleComparisonMode}
|
||||
className={cn(isComparisonMode && "shadow-lg")}
|
||||
>
|
||||
{isComparisonMode ? 'Disable' : 'Enable'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<TextTemplates onSelectTemplate={handleSelectTemplate} />
|
||||
|
||||
<HistoryPanel onSelectHistory={handleSelectHistory} />
|
||||
|
||||
<div className="lg:col-span-2 space-y-6 overflow-y-auto pr-2 custom-scrollbar">
|
||||
<TextInput
|
||||
value={text}
|
||||
onChange={setText}
|
||||
placeholder="Type your text here..."
|
||||
/>
|
||||
|
||||
{isComparisonMode ? (
|
||||
<ComparisonMode
|
||||
text={text}
|
||||
selectedFonts={comparisonFonts}
|
||||
fontResults={comparisonResults}
|
||||
onRemoveFont={handleRemoveFromComparison}
|
||||
onCopyFont={handleCopyComparisonFont}
|
||||
onDownloadFont={handleDownloadComparisonFont}
|
||||
/>
|
||||
) : (
|
||||
<FontPreview
|
||||
text={asciiArt}
|
||||
font={selectedFont}
|
||||
isLoading={isLoading}
|
||||
onCopy={handleCopy}
|
||||
onDownload={handleDownload}
|
||||
onShare={handleShare}
|
||||
/>
|
||||
)}
|
||||
<FontPreview
|
||||
text={asciiArt}
|
||||
font={selectedFont}
|
||||
isLoading={isLoading}
|
||||
onCopy={handleCopy}
|
||||
onDownload={handleDownload}
|
||||
onShare={handleShare}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Font Selector */}
|
||||
<div className="lg:col-span-1">
|
||||
<FontSelector
|
||||
fonts={fonts}
|
||||
selectedFont={selectedFont}
|
||||
onSelectFont={setSelectedFont}
|
||||
onRandomFont={handleRandomFont}
|
||||
isComparisonMode={isComparisonMode}
|
||||
comparisonFonts={comparisonFonts}
|
||||
onAddToComparison={handleAddToComparison}
|
||||
/>
|
||||
<div className="lg:col-span-1 h-[500px] lg:h-auto relative">
|
||||
<div className="lg:absolute lg:inset-0 h-full">
|
||||
<FontSelector
|
||||
fonts={fonts}
|
||||
selectedFont={selectedFont}
|
||||
onSelectFont={setSelectedFont}
|
||||
onRandomFont={handleRandomFont}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Skeleton } from '@/components/ui/Skeleton';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export interface FontPreviewProps {
|
||||
text: string;
|
||||
@@ -28,7 +28,6 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
|
||||
const previewRef = React.useRef<HTMLDivElement>(null);
|
||||
const [textAlign, setTextAlign] = React.useState<TextAlign>('left');
|
||||
const [fontSize, setFontSize] = React.useState<'xs' | 'sm' | 'base'>('sm');
|
||||
const { addToast } = useToast();
|
||||
|
||||
const handleExportPNG = async () => {
|
||||
if (!previewRef.current || !text) return;
|
||||
@@ -44,10 +43,10 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
|
||||
addToast('Exported as PNG!', 'success');
|
||||
toast.success('Exported as PNG!');
|
||||
} catch (error) {
|
||||
console.error('Failed to export PNG:', error);
|
||||
addToast('Failed to export PNG', 'error');
|
||||
toast.error('Failed to export PNG');
|
||||
}
|
||||
};
|
||||
return (
|
||||
|
||||
@@ -5,7 +5,7 @@ import Fuse from 'fuse.js';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Search, X, Heart, Clock, List, Shuffle, Plus, Check } from 'lucide-react';
|
||||
import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import type { FigletFont } from '@/types/figlet';
|
||||
@@ -16,9 +16,6 @@ export interface FontSelectorProps {
|
||||
selectedFont: string;
|
||||
onSelectFont: (fontName: string) => void;
|
||||
onRandomFont?: () => void;
|
||||
isComparisonMode?: boolean;
|
||||
comparisonFonts?: string[];
|
||||
onAddToComparison?: (fontName: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
@@ -29,9 +26,6 @@ export function FontSelector({
|
||||
selectedFont,
|
||||
onSelectFont,
|
||||
onRandomFont,
|
||||
isComparisonMode = false,
|
||||
comparisonFonts = [],
|
||||
onAddToComparison,
|
||||
className
|
||||
}: FontSelectorProps) {
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
@@ -112,9 +106,9 @@ export function FontSelector({
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
|
||||
<div className="p-6 flex flex-col flex-1 min-h-0">
|
||||
<div className="flex items-center justify-between mb-4 shrink-0">
|
||||
<h3 className="text-sm font-medium">Select Font</h3>
|
||||
{onRandomFont && (
|
||||
<Button
|
||||
@@ -123,14 +117,14 @@ export function FontSelector({
|
||||
onClick={onRandomFont}
|
||||
title="Random font"
|
||||
>
|
||||
<Shuffle className="h-4 w-4" />
|
||||
<Shuffle className="h-3 w-3 mr-2" />
|
||||
Random
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
|
||||
<div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg shrink-0">
|
||||
<button
|
||||
onClick={() => setFilter('all')}
|
||||
className={cn(
|
||||
@@ -164,7 +158,7 @@ export function FontSelector({
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative mb-4">
|
||||
<div className="relative mb-4 shrink-0">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
@@ -186,7 +180,7 @@ export function FontSelector({
|
||||
</div>
|
||||
|
||||
{/* Font List */}
|
||||
<div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
|
||||
<div className="flex-1 overflow-y-auto space-y-1 pr-2">
|
||||
{filteredFonts.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
|
||||
@@ -209,66 +203,40 @@ export function FontSelector({
|
||||
className="py-8"
|
||||
/>
|
||||
) : (
|
||||
filteredFonts.map((font) => {
|
||||
const isInComparison = comparisonFonts.includes(font.name);
|
||||
return (
|
||||
<div
|
||||
key={font.name}
|
||||
className={cn(
|
||||
'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
|
||||
)}
|
||||
filteredFonts.map((font) => (
|
||||
<div
|
||||
key={font.name}
|
||||
className={cn(
|
||||
'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
onClick={() => onSelectFont(font.name)}
|
||||
className="flex-1 text-left"
|
||||
>
|
||||
<button
|
||||
onClick={() => onSelectFont(font.name)}
|
||||
className="flex-1 text-left"
|
||||
>
|
||||
{font.name}
|
||||
</button>
|
||||
{isComparisonMode && onAddToComparison && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onAddToComparison(font.name);
|
||||
}}
|
||||
className={cn(
|
||||
'opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded',
|
||||
isInComparison && 'opacity-100 bg-primary/10'
|
||||
)}
|
||||
aria-label={isInComparison ? 'In comparison' : 'Add to comparison'}
|
||||
disabled={isInComparison}
|
||||
>
|
||||
{isInComparison ? (
|
||||
<Check className="h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4 text-muted-foreground hover:text-primary" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => handleToggleFavorite(font.name, e)}
|
||||
{font.name}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleToggleFavorite(font.name, e)}
|
||||
className="p-1"
|
||||
aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
|
||||
>
|
||||
<Heart
|
||||
className={cn(
|
||||
'opacity-0 group-hover:opacity-100 transition-opacity',
|
||||
isFavorite(font.name) && 'opacity-100'
|
||||
'h-4 w-4 transition-colors',
|
||||
isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground/30 hover:text-red-500/50'
|
||||
)}
|
||||
aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
|
||||
>
|
||||
<Heart
|
||||
className={cn(
|
||||
'h-4 w-4 transition-colors',
|
||||
isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
|
||||
<div className="mt-4 pt-4 border-t text-xs text-muted-foreground shrink-0">
|
||||
{filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
|
||||
{filter === 'favorites' && ` • ${favorites.length} total favorites`}
|
||||
{filter === 'recent' && ` • ${recentFonts.length} recent`}
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { History, X, Trash2, ChevronDown, ChevronUp, Clock } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { getHistory, clearHistory, removeHistoryItem, type HistoryItem } from '@/lib/storage/history';
|
||||
|
||||
export interface HistoryPanelProps {
|
||||
onSelectHistory: (item: HistoryItem) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function HistoryPanel({ onSelectHistory, className }: HistoryPanelProps) {
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
const [history, setHistory] = React.useState<HistoryItem[]>([]);
|
||||
|
||||
const loadHistory = React.useCallback(() => {
|
||||
setHistory(getHistory());
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
loadHistory();
|
||||
// Refresh history every 2 seconds when expanded
|
||||
if (isExpanded) {
|
||||
const interval = setInterval(loadHistory, 2000);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [isExpanded, loadHistory]);
|
||||
|
||||
const handleClearAll = () => {
|
||||
clearHistory();
|
||||
loadHistory();
|
||||
};
|
||||
|
||||
const handleRemove = (id: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
removeHistoryItem(id);
|
||||
loadHistory();
|
||||
};
|
||||
|
||||
const formatTime = (timestamp: number) => {
|
||||
const now = Date.now();
|
||||
const diff = now - timestamp;
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
|
||||
if (minutes < 1) return 'Just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
return new Date(timestamp).toLocaleDateString();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<div className="p-4">
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<History className="h-4 w-4" />
|
||||
<span>Copy History</span>
|
||||
<span className="text-xs text-muted-foreground">({history.length})</span>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-4 space-y-2 slide-down">
|
||||
{history.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Clock}
|
||||
title="No copy history yet"
|
||||
description="Your recently copied ASCII art will appear here"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleClearAll}
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3 mr-1" />
|
||||
Clear All
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto">
|
||||
{history.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => onSelectHistory(item)}
|
||||
className="group relative p-3 bg-muted/50 hover:bg-accent hover:scale-[1.02] rounded-md cursor-pointer transition-all"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-mono px-1.5 py-0.5 bg-primary/10 text-primary rounded">
|
||||
{item.font}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatTime(item.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs truncate">{item.text}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => handleRemove(item.id, e)}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-destructive/10 rounded"
|
||||
>
|
||||
<X className="h-3 w-3 text-destructive" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -17,7 +17,7 @@ export function TextInput({ value, onChange, placeholder, className }: TextInput
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder || 'Type something...'}
|
||||
className="w-full h-32 px-4 py-3 text-base border border-input rounded-lg bg-background resize-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 placeholder:text-muted-foreground"
|
||||
className="w-full h-32 px-4 py-3 text-base border border-border rounded-lg bg-input resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring placeholder:text-muted-foreground transition-all duration-200"
|
||||
maxLength={100}
|
||||
/>
|
||||
<div className="absolute bottom-2 right-2 text-xs text-muted-foreground">
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { TEXT_TEMPLATES, TEMPLATE_CATEGORIES } from '@/lib/figlet/constants/templates';
|
||||
|
||||
export interface TextTemplatesProps {
|
||||
onSelectTemplate: (text: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function TextTemplates({ onSelectTemplate, className }: TextTemplatesProps) {
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
const [selectedCategory, setSelectedCategory] = React.useState<string>('all');
|
||||
|
||||
const filteredTemplates = React.useMemo(() => {
|
||||
if (selectedCategory === 'all') return TEXT_TEMPLATES;
|
||||
return TEXT_TEMPLATES.filter(t => t.category === selectedCategory);
|
||||
}, [selectedCategory]);
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<div className="p-4">
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
<span>Text Templates</span>
|
||||
<span className="text-xs text-muted-foreground">({TEXT_TEMPLATES.length})</span>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-4 space-y-3 slide-down">
|
||||
{/* Category Filter */}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
<button
|
||||
onClick={() => setSelectedCategory('all')}
|
||||
className={cn(
|
||||
'px-2 py-1 text-xs rounded-md transition-colors',
|
||||
selectedCategory === 'all'
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted hover:bg-muted/80'
|
||||
)}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{TEMPLATE_CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={cn(
|
||||
'px-2 py-1 text-xs rounded-md transition-colors',
|
||||
selectedCategory === cat.id
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted hover:bg-muted/80'
|
||||
)}
|
||||
>
|
||||
{cat.icon} {cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Templates Grid */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
{filteredTemplates.map((template) => (
|
||||
<button
|
||||
key={template.id}
|
||||
onClick={() => onSelectTemplate(template.text)}
|
||||
className="px-3 py-2 text-xs bg-muted hover:bg-accent hover:scale-105 rounded-md transition-all text-left truncate"
|
||||
title={template.text}
|
||||
>
|
||||
{template.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user