function MainComponent() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const [points, setPoints] = React.useState(0); const greeting = `Hello, User! It's ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`; const handleNewTaskChange = (event)=>setNewTask(event.target.value); const addTask = ()=>{ if (newTask.trim() !== '') { setTasks([ ...tasks, { name: newTask, done: false, points: 10 } ]); setNewTask(''); } }; const toggleTaskDone = (index)=>{ const newTasks = [ ...tasks ]; const task = newTasks[index]; task.done = !task.done; setTasks(newTasks); setPoints(points + (task.done ? task.points : -task.points)); }; const completedTasks = tasks.filter((task)=>task.done).length; const progressBarWidth = tasks.length === 0 ? '0%' : `${completedTasks / tasks.length * 100}%`; const taskList = /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center py-3", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `font-roboto ${task.done ? 'text-gray-400 line-through' : 'text-[#121212]'}`, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, task.points, " pts"), /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "form-checkbox", checked: task.done, onChange: ()=>toggleTaskDone(index), name: `task${index}`, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }))))); const navItems = [ "Home", "Search", "Camera", "Likes", "Profile" ]; const navBar = /*#__PURE__*/ React.createElement("div", { className: "fixed inset-x-0 bottom-0 bg-gray-100", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, navItems.map((item, index)=>/*#__PURE__*/ React.createElement("button", { key: index, name: item, className: "text-gray-600 font-roboto hover:text-blue-500", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa fa-${item.toLowerCase()} fa-lg`, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }))))); return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen pb-20 flex flex-col justify-between", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] w-full mx-auto mt-10 p-6 bg-white shadow-lg rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-center text-[#121212] font-roboto shadow-md", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, greeting), /*#__PURE__*/ React.createElement("span", { className: "text-blue-600 font-roboto text-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, points, " pts")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Add new task...", className: "w-full p-2 text-sm border-2 border-gray-300 rounded-md font-roboto", value: newTask, onChange: handleNewTaskChange, name: "newTask", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "px-4 py-2 ml-2 text-white bg-blue-500 rounded-md font-roboto hover:bg-blue-700", onClick: addTask, __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-[20px] dark:bg-gray-700", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-[20px] rounded-full transition-all duration-300 ease-in-out", style: { width: progressBarWidth }, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, taskList)), navBar); }

Hello, User! It's 10:48 AM