\n {/* Header */}\n

\n Choose Your Plant\n

\n Select the type of plant you'd like to grow with your coding journey\n

\n \n \n \n \n \n

\n\n {/* Plant Types Grid */}\n

\n {PLANT_TYPES.map((plantType) => {\n const isSelected = selectedPlantType === plantType.id;\n const isHovered = hoveredType === plantType.id;\n\n return (\n handleSelect(plantType.id)}\n onMouseEnter={() => setHoveredType(plantType.id)}\n onMouseLeave={() => setHoveredType(null)}\n >\n \n {/* Plant Type Header */}\n

\n \n {plantType.emoji}\n

\n {plantType.name}\n

\n {plantType.description}\n

\n {isSelected && (\n

\n \n

\n )}\n

\n\n {/* Stage Preview */}\n

\n Growth Stages Preview:\n

\n\n {/* Stage Icons Row */}\n

\n {plantType.stages.slice(0, 4).map((stage, _index) => (\n

\n \n \n

\n {stage.name}\n

\n ))}\n {plantType.stages.length > 4 && (\n

\n ...\n

\n +{plantType.stages.length - 4} more\n

\n )}\n

\n\n {/* Theme Colors */}\n

\n Theme:\n

\n\n {/* Selection Overlay */}\n {isSelected && (\n

\n )}\n

\n );\n })}\n \n\n {/* Footer */}\n

\n 💡 Tip: You can change your plant type anytime in the settings\n

\n \n Close\n \n

\n \n \n \n );\n}","deleted","label",[169,170,150],"frontend","components","permalink","https://www.val.town/x/loading/plant/code/frontend/components/PlantSelector.tsx","extension","actionData","errors"]