\n );\n }\n \n return (\n

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

\n {error}\n \n

\n )}\n \n {/* Task editing form */}\n {editingTask && (\n \n )}\n \n {/* Task list */}\n

\n Your Tasks {tasks.length > 0 && `(${tasks.length})`}\n

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

You don't have any tasks yet. Create one above!

\n ) : (\n tasks.map(task => (\n

\n toggleTaskCompletion(task)}\n className=\"mt-1 h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n />\n

\n {task.title}\n

\n {task.description && (\n

\n {task.description}\n

\n )}\n

\n Created: {new Date(task.createdAt).toLocaleString()}\n

\n \n

\n startEditingTask(task)}\n className=\"text-blue-500 hover:text-blue-700\"\n title=\"Edit task\"\n >\n \n \n deleteTask(task.id)}\n className=\"text-red-500 hover:text-red-700\"\n title=\"Delete task\"\n >\n \n \n

\n ))\n )}\n

\n );\n};\n\nexport default TaskList;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/lucie_123/lucie/code/frontend/components/TaskList.tsx","extension","actionData","errors"]