function MainComponent() { const [tasks, setTasks] = React.useState([ "Task 1", "Task 2", "Task 3" ]); const [taskInput, setTaskInput] = React.useState(""); const handleTaskInput = (event)=>{ setTaskInput(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); if (taskInput.trim() !== "") { setTasks((prevTasks)=>[ ...prevTasks, taskInput ]); setTaskInput(""); } }; const handleDelete = (taskIndex)=>{ setTasks((prevTasks)=>prevTasks.filter((_, index)=>index !== taskIndex)); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto pt-8", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "To Do List"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "task", className: "w-full p-2 border border-gray-300 rounded mb-4", placeholder: "Add a new task", value: taskInput, onChange: handleTaskInput, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Add Task")), /*#__PURE__*/ React.createElement("ul", { className: "list-none", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center border-b border-gray-300 p-2", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, task), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(index), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this })))))); }