\n setName(e.target.value)}\n placeholder=\"Add a new habit... 🌟\"\n className=\"w-full px-4 py-3 rounded-lg bg-white/20 text-white placeholder-white/60 border border-white/30 focus:border-white/60 focus:outline-none focus:ring-2 focus:ring-white/20\"\n onFocus={() => setIsExpanded(true)}\n />\n

\n \n {isExpanded && (\n

\n setDescription(e.target.value)}\n placeholder=\"Description (optional)\"\n rows={2}\n className=\"w-full px-4 py-3 rounded-lg bg-white/20 text-white placeholder-white/60 border border-white/30 focus:border-white/60 focus:outline-none focus:ring-2 focus:ring-white/20 resize-none\"\n />\n \n

\n \n ✨ Add Habit\n \n \n {\n setIsExpanded(false);\n setName('');\n setDescription('');\n }}\n className=\"px-6 py-3 text-white/70 hover:text-white transition-colors\"\n >\n Cancel\n \n

\n )}\n \n {!isExpanded && name.trim() && (\n \n ✨ Add \"{name}\"\n \n )}\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Onujules/my-first-val/code/frontend/components/AddHabitForm.tsx","extension","actionData","errors"]