\n 📝 Todo App\n

\n \n

\n\n

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

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

\n\n {/* Todo list */}\n \n {({ data }: { data: Todo[] }) => (\n

\n {data.length === 0 ? (\n

\n {filter === 'all' && \"No todos yet. Add one above!\"}\n {filter === 'active' && \"No active todos!\"}\n {filter === 'completed' && \"No completed todos!\"}\n

\n ) : (\n data.map((todo) => (\n \n ))\n )}\n

\n )}\n \n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/bart/Todo/code/frontend/components/App.tsx","extension","actionData","errors"]