function MainComponent() { const [tasks, setTasks] = React.useState([]); const [taskInput, setTaskInput] = React.useState(""); const [categoryInput, setCategoryInput] = React.useState(""); const [priority, setPriority] = React.useState("低い"); const [assignee, setAssignee] = React.useState(""); const [isPopupOpen, setIsPopupOpen] = React.useState(false); const [categories, setCategories] = React.useState([]); const handleAddTask = (e)=>{ e.preventDefault(); if (taskInput.trim() && categoryInput.trim() && assignee.trim()) { const newTask = { text: taskInput, completed: false, priority: priority, assignee: assignee }; const categoryIndex = categories.findIndex((cat)=>cat.name === categoryInput); if (categoryIndex !== -1) { const newCategories = [ ...categories ]; newCategories[categoryIndex].tasks.push(newTask); setCategories(newCategories); } else { setCategories([ ...categories, { name: categoryInput, tasks: [ newTask ] } ]); } setTaskInput(""); setCategoryInput(""); setPriority("低い"); setAssignee(""); setIsPopupOpen(false); } }; const handleTaskCompletion = (categoryIndex, taskIndex)=>{ const newCategories = categories.map((category, i)=>{ if (i === categoryIndex) { const newTasks = category.tasks.map((task, j)=>j === taskIndex ? { ...task, completed: !task.completed } : task); return { ...category, tasks: newTasks }; } return category; }); setCategories(newCategories); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-gray-900 mb-6", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "家事のタスクリスト"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsPopupOpen(true), className: "w-[200px] p-2 mb-6 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "タスクを追加"), isPopupOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md w-[400px]", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddTask, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold mb-2", htmlFor: "taskInput", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "新しいタスク"), /*#__PURE__*/ React.createElement("input", { id: "taskInput", type: "text", name: "task", value: taskInput, onChange: (e)=>setTaskInput(e.target.value), className: "block w-full text-sm text-gray-900 border border-gray-300 rounded-lg p-2 focus:outline-none", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold mb-2", htmlFor: "categoryInput", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "カテゴリ"), /*#__PURE__*/ React.createElement("input", { id: "categoryInput", type: "text", name: "category", value: categoryInput, onChange: (e)=>setCategoryInput(e.target.value), className: "block w-full text-sm text-gray-900 border border-gray-300 rounded-lg p-2 focus:outline-none", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold mb-2", htmlFor: "priority", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, "優先度"), /*#__PURE__*/ React.createElement("select", { id: "priority", name: "priority", value: priority, onChange: (e)=>setPriority(e.target.value), className: "block w-full text-sm text-gray-900 border border-gray-300 rounded-lg p-2 focus:outline-none", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "低い", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, "低い"), /*#__PURE__*/ React.createElement("option", { value: "中", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, "中"), /*#__PURE__*/ React.createElement("option", { value: "高い", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, "高い"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold mb-2", htmlFor: "assignee", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "担当者"), /*#__PURE__*/ React.createElement("input", { id: "assignee", type: "text", name: "assignee", value: assignee, onChange: (e)=>setAssignee(e.target.value), className: "block w-full text-sm text-gray-900 border border-gray-300 rounded-lg p-2 focus:outline-none", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, "タスクを追加")))), categories.map((category, categoryIndex)=>/*#__PURE__*/ React.createElement("div", { key: categoryIndex, className: "w-[400px] mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, category.name), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, category.tasks.map((task, taskIndex)=>{ const taskClass = "w-full p-2 mb-2 text-lg text-left rounded-lg cursor-pointer"; const completedClass = task.completed ? "line-through bg-green-200" : "bg-white"; return /*#__PURE__*/ React.createElement("li", { key: taskIndex, className: `${taskClass} ${completedClass}`, onClick: ()=>handleTaskCompletion(categoryIndex, taskIndex), __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, task.text, " - ", task.priority, " - ", task.assignee); }))))); }