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

144 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} />
}