\n {isEditing ? 'Edit Habit' : 'Add New Habit'}\n

\n\n

\n {/* Habit Name */}\n

\n \n Habit Name *\n \n setName(e.target.value)}\n placeholder=\"e.g., Drink 8 glasses of water\"\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n />\n

\n\n {/* Description */}\n

\n \n Description (optional)\n \n setDescription(e.target.value)}\n placeholder=\"Add any notes or details about this habit...\"\n rows={3}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n\n {/* Color Selection */}\n

\n \n Color\n \n

\n {HABIT_COLORS.map((colorOption) => (\n setColor(colorOption)}\n className={`\n w-8 h-8 rounded-full border-2 transition-all\n ${color === colorOption \n ? 'border-gray-900 scale-110' \n : 'border-gray-300 hover:border-gray-400'\n }\n `}\n style={{ backgroundColor: colorOption }}\n title={colorOption}\n />\n ))}\n

\n\n {/* Error Message */}\n {error && (\n

\n {error}\n

\n )}\n\n {/* Form Actions */}\n

\n \n {loading ? (\n

\n {isEditing ? 'Updating...' : 'Creating...'}\n

\n ) : (\n isEditing ? 'Update Habit' : 'Create Habit'\n )}\n \n \n Cancel\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/pfsthaps/Habits/code/frontend/components/HabitForm.tsx","extension","actionData","errors"]