📝 To-Do List

Stay organized and get things done!

\n\n {error && (\n

{error}

\n \n

\n )}\n\n \n\n {/* Filter buttons */}\n

\n setFilter('all')}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n filter === 'all' \n ? 'bg-blue-500 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n All ({tasks.length})\n \n setFilter('active')}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n filter === 'active' \n ? 'bg-blue-500 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n Active ({activeCount})\n \n setFilter('completed')}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n filter === 'completed' \n ? 'bg-blue-500 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n Completed ({completedCount})\n \n

\n\n {/* Task list */}\n {loading ? (\n

Loading tasks...

\n ) : filteredTasks.length === 0 ? (\n

\n {filter === 'completed' ? '🎉' : '📝'}\n

\n {filter === 'completed' \n ? 'No completed tasks yet!' \n : filter === 'active'\n ? 'No active tasks! Time to add some.'\n : 'No tasks yet! Add your first task above.'}\n

\n ) : (\n

\n {filteredTasks.map(task => (\n \n ))}\n

\n )}\n\n {/* Summary */}\n {tasks.length > 0 && (\n

\n {completedCount} of {tasks.length} tasks completed\n {completedCount === tasks.length && tasks.length > 0 && (\n 🎉 All done!\n )}\n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Ayskrmi028/untitled-6073/code/frontend/components/App.tsx","extension","actionData","errors"]