\n {/* Controls */}\n

\n {/* Filters */}\n

\n {([\"all\", \"active\", \"completed\"] as FilterType[]).map((f) => (\n setFilter(f)}\n className={`\n px-3 py-1.5 rounded-md text-sm font-medium capitalize transition-colors\n ${filter === f\n ? \"bg-white dark:bg-gray-700 text-warm-600 dark:text-warm-400 shadow-sm\"\n : \"text-gray-600 dark:text-gray-400 hover:text-warm-600 dark:hover:text-warm-400\"\n }\n `}\n >\n {f} ({counts[f]})\n \n ))}\n

\n\n {/* Sort + Add button */}\n

\n setSort(e.target.value as SortType)}\n className=\"\n px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600\n bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300\n text-sm focus:ring-2 focus:ring-warm-500 focus:border-transparent\n \"\n >\n \n \n \n \n\n \n \n Add Todo\n \n

\n\n {/* Todo grid */}\n {filteredAndSortedTodos.length === 0 ? (\n

\n \n \n \n

\n {filter === \"all\"\n ? \"No todos yet\"\n : filter === \"active\"\n ? \"No active todos\"\n : \"No completed todos\"}\n

\n {filter === \"all\"\n ? \"Create your first todo to get started!\"\n : filter === \"active\"\n ? \"All your todos are completed!\"\n : \"Complete some todos to see them here\"}\n

\n ) : (\n

\n {filteredAndSortedTodos.map((todo) => (\n \n ))}\n

\n )}\n

\n );\n}\n\nexport default TodoList;\n","deleted","label",[174,175,156],"FRONTEND","components","permalink","https://www.val.town/x/cgshaq/untitled-2571/code/FRONTEND/components/TodoList.tsx","extension","actionData","errors"]