function MainComponent() { const [tasks, setTasks] = React.useState([ { id: 1, text: "Buy milk", completed: false }, { id: 2, text: "Finish project", completed: true }, { id: 3, text: "Call mom", completed: false } ]); const [sortOrder, setSortOrder] = React.useState("ASC"); const toggleTaskCompletion = (id)=>{ const updatedTasks = tasks.map((task)=>task.id === id ? { ...task, completed: !task.completed } : task); setTasks(updatedTasks); }; const sortTasks = ()=>{ const sortedTasks = [ ...tasks ].sort((a, b)=>{ if (sortOrder === "ASC") return a.text.localeCompare(b.text); return b.text.localeCompare(a.text); }); setTasks(sortedTasks); setSortOrder(sortOrder === "ASC" ? "DESC" : "ASC"); }; const uncheckedTasks = tasks.filter((task)=>!task.completed).map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "w-4 h-4", onChange: ()=>toggleTaskCompletion(task.id), __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, task.text))); const checkedTasks = tasks.filter((task)=>task.completed).map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "w-4 h-4", checked: true, onChange: ()=>toggleTaskCompletion(task.id), readOnly: true, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212] line-through", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, task.text))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "ToDo List"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#007bff] text-white rounded", onClick: sortTasks, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Sort ", sortOrder === "ASC" ? "Descending" : "Ascending"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Unchecked Tasks"), uncheckedTasks.length > 0 ? uncheckedTasks : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 61, columnNumber: 55 }, __self: this }, "No unchecked tasks")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Checked Tasks"), checkedTasks.length > 0 ? checkedTasks : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 65, columnNumber: 51 }, __self: this }, "No checked tasks"))); }