Files
fintrack/components/ui/category-icon.tsx

148 lines
2.5 KiB
TypeScript

"use client";
import {
ShoppingCart,
Utensils,
Croissant,
Fuel,
Train,
Car,
SquareParking,
Bike,
Plane,
Home,
Zap,
Droplet,
Hammer,
Sofa,
Pill,
Stethoscope,
Hospital,
Glasses,
Dumbbell,
Sparkles,
Tv,
Music,
Film,
Gamepad,
Book,
Ticket,
Shirt,
Smartphone,
Package,
Wifi,
Repeat,
Landmark,
Shield,
HeartPulse,
Receipt,
PiggyBank,
Banknote,
Wallet,
HandCoins,
Undo,
Coins,
Bed,
Luggage,
GraduationCap,
Baby,
PawPrint,
Wrench,
HeartHandshake,
Gift,
Cigarette,
ArrowRightLeft,
HelpCircle,
Tag,
Folder,
Key,
Refrigerator,
type LucideIcon,
} from "lucide-react";
// Map icon names to Lucide components
const iconMap: Record<string, LucideIcon> = {
"shopping-cart": ShoppingCart,
utensils: Utensils,
croissant: Croissant,
fuel: Fuel,
train: Train,
car: Car,
"car-taxi": Car, // Using Car as fallback for car-taxi
"car-key": Key, // Using Key as fallback
parking: SquareParking,
bike: Bike,
plane: Plane,
home: Home,
zap: Zap,
droplet: Droplet,
hammer: Hammer,
sofa: Sofa,
refrigerator: Refrigerator,
pill: Pill,
stethoscope: Stethoscope,
hospital: Hospital,
glasses: Glasses,
dumbbell: Dumbbell,
sparkles: Sparkles,
tv: Tv,
music: Music,
film: Film,
gamepad: Gamepad,
book: Book,
ticket: Ticket,
shirt: Shirt,
smartphone: Smartphone,
package: Package,
wifi: Wifi,
repeat: Repeat,
landmark: Landmark,
shield: Shield,
"heart-pulse": HeartPulse,
receipt: Receipt,
"piggy-bank": PiggyBank,
banknote: Banknote,
wallet: Wallet,
"hand-coins": HandCoins,
undo: Undo,
coins: Coins,
bed: Bed,
luggage: Luggage,
"graduation-cap": GraduationCap,
baby: Baby,
"paw-print": PawPrint,
wrench: Wrench,
"heart-handshake": HeartHandshake,
gift: Gift,
cigarette: Cigarette,
"arrow-right-left": ArrowRightLeft,
"help-circle": HelpCircle,
tag: Tag,
folder: Folder,
};
// Get all available icon names
export const availableIcons = Object.keys(iconMap);
// Get the icon component by name
export function getIconComponent(iconName: string): LucideIcon {
return iconMap[iconName] || Tag;
}
interface CategoryIconProps {
icon: string;
color?: string;
className?: string;
size?: number;
}
export function CategoryIcon({
icon,
color,
className,
size = 20,
}: CategoryIconProps) {
const IconComponent = getIconComponent(icon);
return <IconComponent className={className} style={{ color }} size={size} />;
}