| 1 |
/** |
| 2 |
* Icon Selector Component |
| 3 |
* Maps icon names to lucide-react SVG icons |
| 4 |
*/ |
| 5 |
|
| 6 |
import React from "react"; |
| 7 |
import { |
| 8 |
Activity, |
| 9 |
UtensilsCrossed, |
| 10 |
Building2, |
| 11 |
Bus, |
| 12 |
Moon, |
| 13 |
Package, |
| 14 |
Target, |
| 15 |
Camera, |
| 16 |
Mountain, |
| 17 |
Waves, |
| 18 |
Palette, |
| 19 |
Plane, |
| 20 |
Car, |
| 21 |
Hotel, |
| 22 |
Coffee, |
| 23 |
Bed, |
| 24 |
MapPin, |
| 25 |
Footprints, |
| 26 |
Eye, |
| 27 |
Clock, |
| 28 |
Calendar, |
| 29 |
Image, |
| 30 |
Music, |
| 31 |
Gamepad2, |
| 32 |
BookOpen, |
| 33 |
ShoppingBag, |
| 34 |
Heart, |
| 35 |
Star, |
| 36 |
Zap, |
| 37 |
Flame, |
| 38 |
} from "lucide-react"; |
| 39 |
|
| 40 |
export type IconName = |
| 41 |
| "activity" |
| 42 |
| "utensils" |
| 43 |
| "building" |
| 44 |
| "bus" |
| 45 |
| "moon" |
| 46 |
| "package" |
| 47 |
| "target" |
| 48 |
| "camera" |
| 49 |
| "mountain" |
| 50 |
| "waves" |
| 51 |
| "palette" |
| 52 |
| "plane" |
| 53 |
| "car" |
| 54 |
| "hotel" |
| 55 |
| "coffee" |
| 56 |
| "bed" |
| 57 |
| "map-pin" |
| 58 |
| "footprints" |
| 59 |
| "eye" |
| 60 |
| "clock" |
| 61 |
| "calendar" |
| 62 |
| "image" |
| 63 |
| "music" |
| 64 |
| "gamepad" |
| 65 |
| "book" |
| 66 |
| "shopping" |
| 67 |
| "heart" |
| 68 |
| "star" |
| 69 |
| "zap" |
| 70 |
| "flame"; |
| 71 |
|
| 72 |
const iconMap: Record< |
| 73 |
IconName, |
| 74 |
React.ComponentType<React.SVGProps<SVGSVGElement>> |
| 75 |
> = { |
| 76 |
activity: Activity, |
| 77 |
utensils: UtensilsCrossed, |
| 78 |
building: Building2, |
| 79 |
bus: Bus, |
| 80 |
moon: Moon, |
| 81 |
package: Package, |
| 82 |
target: Target, |
| 83 |
camera: Camera, |
| 84 |
mountain: Mountain, |
| 85 |
waves: Waves, |
| 86 |
palette: Palette, |
| 87 |
plane: Plane, |
| 88 |
car: Car, |
| 89 |
hotel: Hotel, |
| 90 |
coffee: Coffee, |
| 91 |
bed: Bed, |
| 92 |
"map-pin": MapPin, |
| 93 |
footprints: Footprints, |
| 94 |
eye: Eye, |
| 95 |
clock: Clock, |
| 96 |
calendar: Calendar, |
| 97 |
image: Image, |
| 98 |
music: Music, |
| 99 |
gamepad: Gamepad2, |
| 100 |
book: BookOpen, |
| 101 |
shopping: ShoppingBag, |
| 102 |
heart: Heart, |
| 103 |
star: Star, |
| 104 |
zap: Zap, |
| 105 |
flame: Flame, |
| 106 |
}; |
| 107 |
|
| 108 |
interface IconSelectorProps { |
| 109 |
iconName: IconName | string; |
| 110 |
className?: string; |
| 111 |
size?: number; |
| 112 |
} |
| 113 |
|
| 114 |
export const IconSelector: React.FC<IconSelectorProps> = ({ |
| 115 |
iconName, |
| 116 |
className = "w-5 h-5", |
| 117 |
size, |
| 118 |
}: IconSelectorProps) => { |
| 119 |
const IconComponent = iconMap[iconName as IconName] || Package; |
| 120 |
const sizeProps = size ? { width: size, height: size } : {}; |
| 121 |
|
| 122 |
return <IconComponent className={className} {...sizeProps} />; |
| 123 |
}; |
| 124 |
|
| 125 |
export const availableIcons: Array<{ |
| 126 |
name: IconName; |
| 127 |
label: string; |
| 128 |
component: React.ComponentType<React.SVGProps<SVGSVGElement>>; |
| 129 |
}> = [ |
| 130 |
{ name: "activity", label: "Activity", component: Activity }, |
| 131 |
{ name: "utensils", label: "Meal", component: UtensilsCrossed }, |
| 132 |
{ name: "building", label: "Building", component: Building2 }, |
| 133 |
{ name: "bus", label: "Bus", component: Bus }, |
| 134 |
{ name: "plane", label: "Plane", component: Plane }, |
| 135 |
{ name: "car", label: "Car", component: Car }, |
| 136 |
{ name: "hotel", label: "Hotel", component: Hotel }, |
| 137 |
{ name: "moon", label: "Rest", component: Moon }, |
| 138 |
{ name: "bed", label: "Bed", component: Bed }, |
| 139 |
{ name: "coffee", label: "Coffee", component: Coffee }, |
| 140 |
{ name: "package", label: "Package", component: Package }, |
| 141 |
{ name: "target", label: "Target", component: Target }, |
| 142 |
{ name: "camera", label: "Camera", component: Camera }, |
| 143 |
{ name: "mountain", label: "Mountain", component: Mountain }, |
| 144 |
{ name: "waves", label: "Waves", component: Waves }, |
| 145 |
{ name: "palette", label: "Palette", component: Palette }, |
| 146 |
{ name: "map-pin", label: "Location", component: MapPin }, |
| 147 |
{ name: "footprints", label: "Hiking", component: Footprints }, |
| 148 |
{ name: "eye", label: "Sightseeing", component: Eye }, |
| 149 |
{ name: "clock", label: "Time", component: Clock }, |
| 150 |
{ name: "calendar", label: "Calendar", component: Calendar }, |
| 151 |
{ name: "image", label: "Image", component: Image }, |
| 152 |
{ name: "music", label: "Music", component: Music }, |
| 153 |
{ name: "gamepad", label: "Entertainment", component: Gamepad2 }, |
| 154 |
{ name: "book", label: "Education", component: BookOpen }, |
| 155 |
{ name: "shopping", label: "Shopping", component: ShoppingBag }, |
| 156 |
{ name: "heart", label: "Wellness", component: Heart }, |
| 157 |
{ name: "star", label: "Featured", component: Star }, |
| 158 |
{ name: "zap", label: "Energy", component: Zap }, |
| 159 |
{ name: "flame", label: "Adventure", component: Flame }, |
| 160 |
]; |
| 161 |
|
| 162 |
export default IconSelector; |
| 163 |
|
