feat: implement Figlet, Pastel, and Unit tools with a unified layout
- Add Figlet text converter with font selection and history - Add Pastel color palette generator and manipulation suite - Add comprehensive Units converter with category-based logic - Introduce AppShell with Sidebar and Header for navigation - Modernize theme system with CSS variables and new animations - Update project configuration and dependencies
This commit is contained in:
279
components/figlet/FontSelector.tsx
Normal file
279
components/figlet/FontSelector.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user