function MainComponent() { const [tasks, setTasks] = React.useState([ { id: 1, title: "Task 1", description: "Description for task 1", completed: false }, { id: 2, title: "Task 2", description: "Description for task 2", completed: true } ]); const [newTask, setNewTask] = React.useState({ title: "", description: "" }); const toggleTaskCompletion = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, completed: !task.completed } : task)); }; const invertedTasks = [ ...tasks ].reverse(); const addTask = ()=>{ if (newTask.title.trim() && newTask.description.trim()) { setTasks([ ...tasks, { id: Date.now(), title: newTask.title, description: newTask.description, completed: false } ]); setNewTask({ title: "", description: "" }); } }; const handleInputChange = (e)=>{ setNewTask({ ...newTask, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto mt-10 p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Task Tracker"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: newTask.title, onChange: handleInputChange, placeholder: "Task Title", className: "w-full p-2 mb-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", value: newTask.description, onChange: handleInputChange, placeholder: "Task Description", className: "w-full p-2 mb-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTask, className: "w-full p-2 bg-blue-500 text-white rounded", name: "addTaskButton", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Add Task")), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, invertedTasks.map((task)=>{ const taskClassNames = `text-xl ${task.completed ? 'text-green-500' : 'text-red-500'}`; return /*#__PURE__*/ React.createElement("li", { key: task.id, className: "mb-4 p-4 bg-gray-100 rounded-lg flex justify-between items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, task.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, task.description)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleTaskCompletion(task.id), className: taskClassNames, name: "toggleButton", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, task.completed ? "✅" : "❌")); }))); }