function MainComponent() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const handleAddTask = ()=>{ if (newTask.trim()) { setTasks([ ...tasks, { id: tasks.length + 1, name: newTask, completed: false } ]); setNewTask(''); } }; const handleToggleTask = (taskId)=>{ setTasks(tasks.map((task)=>task.id === taskId ? { ...task, completed: !task.completed } : task)); }; const handleDeleteTask = (taskId)=>{ setTasks(tasks.filter((task)=>task.id !== taskId)); }; return /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-5 font-crimson-text", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "タスク管理"), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTask", value: newTask, onChange: (e)=>setNewTask(e.target.value), className: "border p-2 mr-2 w-[300px]", placeholder: "新しいタスクを追加", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddTask, className: "bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task.id, className: "flex justify-between items-center p-2 border-b border-gray-300 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: task.completed ? 'line-through' : '', __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleToggleTask(task.id), className: "text-green-500 mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 39, columnNumber: 97 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteTask(task.id), className: "text-red-500", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 40, columnNumber: 90 }, __self: this }))))))); }