\n {emoji} {title}\n

\n {options.map((option) => (\n setSelectedValue(option.name)}\n className={`emoji-btn bg-white rounded-lg p-4 shadow-md flex flex-col items-center justify-center ${\n selectedValue === option.name ? \"selected\" : \"\"\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\" : \"\"} ${\n color.name === \"Rainbow\" ? \"rainbow-btn\" : \"\"\n }`}\n style={{ backgroundColor: color.name !== \"Rainbow\" ? color.hex : undefined }}\n title={color.name}\n >\n {color.name}\n

\n ))}\n

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

Create Your Bedtime Story

\n \n {renderSelectionSection(\n \"Choose an Animal\",\n \"🦊\",\n animalOptions,\n selectedAnimal,\n setSelectedAnimal\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 Story ✨\n \n

\n );\n};","deleted","label",[166,167,149],"frontend","components","permalink","https://www.val.town/x/notforme/bedtime-story-time/code/frontend/components/StoryGenerator.tsx","extension","actionData","errors"]