\n {habits.map((habit) => (\n \n

\n {habit.name}\n

\n \n {habit.streak > 0 && (\n \n 🔥 {habit.streak} day{habit.streak !== 1 ? 's' : ''}\n \n )}\n

\n \n {habit.description && (\n

{habit.description}

\n )}\n \n

\n \n 📊 {habit.total_completions} completion{habit.total_completions !== 1 ? 's' : ''}\n \n {habit.last_completed && (\n \n 📅 Last: {formatDate(habit.last_completed)}\n \n )}\n

\n \n

\n {habit.completed_today ? (\n

\n ✅\n Done today!\n

\n ) : (\n handleComplete(habit.id)}\n disabled={completingId === habit.id}\n className=\"complete-btn bg-gradient-to-r from-green-500 to-emerald-600 text-white font-semibold py-2 px-6 rounded-lg hover:from-green-600 hover:to-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {completingId === habit.id ? (\n \n ⏳\n Completing...\n \n ) : (\n '✨ Complete'\n )}\n \n )}\n \n onDelete(habit.id)}\n className=\"text-red-400 hover:text-red-300 p-2 rounded-lg hover:bg-red-500/20 transition-colors\"\n title=\"Delete habit\"\n >\n 🗑️\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/HabitList.tsx","extension","actionData","errors"]