\n {emoji} {title}\n

\n {options.map((option) => (\n setSelectedValue(option.name)}\n className={`emoji-btn bg-black bg-opacity-80 text-white rounded-lg p-4 shadow-md flex flex-col items-center justify-center ${\n selectedValue === option.name ? \"selected border-2 border-cyan-400\" : \"\"\n }`}\n >\n {option.emoji}\n {option.name}\n \n ))}\n

\n );\n \n const renderColorSelection = () => (\n

\n 🎨 Choose a Color\n

\n {colorOptions.map((color) => (\n

\n setSelectedColor(color.name)}\n className={`color-btn ${selectedColor === color.name ? \"selected border-2 border-cyan-400\" : \"\"} ${\n color.name === \"Holographic\" ? \"holographic-btn\" : \"\"\n }`}\n style={{ backgroundColor: color.name !== \"Holographic\" ? color.hex : undefined }}\n title={color.name}\n >\n {color.name}\n

\n ))}\n

\n );\n \n return (\n

Create Your Space Adventure

\n \n {renderSelectionSection(\n \"Choose a Character\",\n \"🤖\",\n characterOptions,\n selectedCharacter,\n setSelectedCharacter\n )}\n \n {renderColorSelection()}\n \n {renderSelectionSection(\n \"Choose an Activity\",\n \"🚀\",\n activityOptions,\n selectedActivity,\n setSelectedActivity\n )}\n \n {renderSelectionSection(\n \"Choose a Story Style\",\n \"🌌\",\n styleOptions,\n selectedStyle,\n setSelectedStyle\n )}\n \n

\n \n ✨ Generate My Space Story ✨\n \n

\n );\n};","deleted","label",[171,172,152],"frontend","components","permalink","https://www.val.town/x/dthyresson/scifi-bedtime-story-time/code/frontend/components/StoryGenerator.tsx","extension","actionData","errors"]