280 lines
9.7 KiB
TypeScript
280 lines
9.7 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
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 { cn } from '@/lib/utils/cn';
|
|
import { Button } from '@/components/ui/Button';
|
|
import type { FigletFont } from '@/types/figlet';
|
|
import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites';
|
|
|
|
export interface FontSelectorProps {
|
|
fonts: FigletFont[];
|
|
selectedFont: string;
|
|
onSelectFont: (fontName: string) => void;
|
|
onRandomFont?: () => void;
|
|
isComparisonMode?: boolean;
|
|
comparisonFonts?: string[];
|
|
onAddToComparison?: (fontName: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
type FilterType = 'all' | 'favorites' | 'recent';
|
|
|
|
export function FontSelector({
|
|
fonts,
|
|
selectedFont,
|
|
onSelectFont,
|
|
onRandomFont,
|
|
isComparisonMode = false,
|
|
comparisonFonts = [],
|
|
onAddToComparison,
|
|
className
|
|
}: FontSelectorProps) {
|
|
const [searchQuery, setSearchQuery] = React.useState('');
|
|
const [filter, setFilter] = React.useState<FilterType>('all');
|
|
const [favorites, setFavorites] = React.useState<string[]>([]);
|
|
const [recentFonts, setRecentFonts] = React.useState<string[]>([]);
|
|
const searchInputRef = React.useRef<HTMLInputElement>(null);
|
|
|
|
// Load favorites and recent fonts
|
|
React.useEffect(() => {
|
|
setFavorites(getFavorites());
|
|
setRecentFonts(getRecentFonts());
|
|
}, []);
|
|
|
|
// Keyboard shortcuts
|
|
React.useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
// "/" to focus search
|
|
if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
|
|
e.preventDefault();
|
|
searchInputRef.current?.focus();
|
|
}
|
|
// "Esc" to clear search
|
|
if (e.key === 'Escape' && searchQuery) {
|
|
e.preventDefault();
|
|
setSearchQuery('');
|
|
searchInputRef.current?.blur();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [searchQuery]);
|
|
|
|
// Initialize Fuse.js for fuzzy search
|
|
const fuse = React.useMemo(() => {
|
|
return new Fuse(fonts, {
|
|
keys: ['name', 'fileName'],
|
|
threshold: 0.3,
|
|
includeScore: true,
|
|
});
|
|
}, [fonts]);
|
|
|
|
const filteredFonts = React.useMemo(() => {
|
|
let fontsToFilter = fonts;
|
|
|
|
// Apply category filter
|
|
if (filter === 'favorites') {
|
|
fontsToFilter = fonts.filter(f => favorites.includes(f.name));
|
|
} else if (filter === 'recent') {
|
|
fontsToFilter = fonts.filter(f => recentFonts.includes(f.name));
|
|
// Sort by recent order
|
|
fontsToFilter.sort((a, b) => {
|
|
return recentFonts.indexOf(a.name) - recentFonts.indexOf(b.name);
|
|
});
|
|
}
|
|
|
|
// Apply search query
|
|
if (!searchQuery) return fontsToFilter;
|
|
|
|
const results = fuse.search(searchQuery);
|
|
const searchResults = results.map(result => result.item);
|
|
|
|
// Filter search results by category
|
|
if (filter === 'favorites') {
|
|
return searchResults.filter(f => favorites.includes(f.name));
|
|
} else if (filter === 'recent') {
|
|
return searchResults.filter(f => recentFonts.includes(f.name));
|
|
}
|
|
|
|
return searchResults;
|
|
}, [fonts, searchQuery, fuse, filter, favorites, recentFonts]);
|
|
|
|
const handleToggleFavorite = (fontName: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
toggleFavorite(fontName);
|
|
setFavorites(getFavorites());
|
|
};
|
|
|
|
return (
|
|
<Card className={className}>
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-sm font-medium">Select Font</h3>
|
|
{onRandomFont && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onRandomFont}
|
|
title="Random font"
|
|
>
|
|
<Shuffle className="h-4 w-4" />
|
|
Random
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Filter Tabs */}
|
|
<div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
|
|
<button
|
|
onClick={() => setFilter('all')}
|
|
className={cn(
|
|
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
|
|
filter === 'all' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
|
|
)}
|
|
>
|
|
<List className="inline-block h-3 w-3 mr-1" />
|
|
All
|
|
</button>
|
|
<button
|
|
onClick={() => setFilter('favorites')}
|
|
className={cn(
|
|
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
|
|
filter === 'favorites' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
|
|
)}
|
|
>
|
|
<Heart className="inline-block h-3 w-3 mr-1" />
|
|
Favorites
|
|
</button>
|
|
<button
|
|
onClick={() => setFilter('recent')}
|
|
className={cn(
|
|
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
|
|
filter === 'recent' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
|
|
)}
|
|
>
|
|
<Clock className="inline-block h-3 w-3 mr-1" />
|
|
Recent
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search Input */}
|
|
<div className="relative mb-4">
|
|
<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}
|
|
type="text"
|
|
placeholder="Search fonts... (Press / to focus)"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-9 pr-9"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => setSearchQuery('')}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
aria-label="Clear search"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Font List */}
|
|
<div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
|
|
{filteredFonts.length === 0 ? (
|
|
<EmptyState
|
|
icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
|
|
title={
|
|
filter === 'favorites'
|
|
? 'No favorite fonts yet'
|
|
: filter === 'recent'
|
|
? 'No recent fonts'
|
|
: 'No fonts found'
|
|
}
|
|
description={
|
|
filter === 'favorites'
|
|
? 'Click the heart icon on any font to add it to your favorites'
|
|
: filter === 'recent'
|
|
? 'Fonts you use will appear here'
|
|
: searchQuery
|
|
? 'Try a different search term'
|
|
: 'Loading fonts...'
|
|
}
|
|
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'
|
|
)}
|
|
>
|
|
<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)}
|
|
className={cn(
|
|
'opacity-0 group-hover:opacity-100 transition-opacity',
|
|
isFavorite(font.name) && 'opacity-100'
|
|
)}
|
|
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>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
|
|
{filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
|
|
{filter === 'favorites' && ` • ${favorites.length} total favorites`}
|
|
{filter === 'recent' && ` • ${recentFonts.length} recent`}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|