function MainComponent() { const [projects, setProjects] = React.useState([ { name: "Project 1", todo: [ { text: "Task 1", deadline: new Date(Date.now() + 86400000) }, { text: "Task 2", deadline: new Date(Date.now() + 172800000) } ], inProgress: [ { text: "Task 3", deadline: new Date(Date.now() + 259200000) } ], done: [ { text: "Task 4", deadline: new Date(Date.now() + 345600000) } ] }, { name: "Project 2", todo: [ { text: "Task A", deadline: new Date(Date.now() + 86400000) }, { text: "Task B", deadline: new Date(Date.now() + 172800000) } ], inProgress: [ { text: "Task C", deadline: new Date(Date.now() + 259200000) } ], done: [ { text: "Task D", deadline: new Date(Date.now() + 345600000) } ] } ]); const [currentProject, setCurrentProject] = React.useState(projects[0]); const [notifications, setNotifications] = React.useState([]); const [showProjects, setShowProjects] = React.useState(true); const [showNotifications, setShowNotifications] = React.useState(true); const handleProjectChange = (e)=>{ const project = projects.find((p)=>p.name === e.target.value); setCurrentProject(project); }; const checkDeadlines = ()=>{ const now = new Date(); const newNotifications = []; currentProject.todo.concat(currentProject.inProgress).forEach((task)=>{ const timeDiff = task.deadline - now; const daysLeft = Math.floor(timeDiff / 86400000); const isNearDeadline = timeDiff < 259200000 && timeDiff > 0; if (isNearDeadline) { newNotifications.push(`Task ${task.text} の期限はあと${daysLeft}日です`); } }); setNotifications(newNotifications); }; React.useEffect(()=>{ const interval = setInterval(checkDeadlines, 60000); return ()=>clearInterval(interval); }, [ currentProject ]); return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] bg-gray-200 p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold mb-4 cursor-pointer", onClick: ()=>setShowProjects(!showProjects), __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Projects"), showProjects && /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 mb-8", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, projects.map((project)=>/*#__PURE__*/ React.createElement("li", { key: project.name, className: "cursor-pointer p-2 bg-white rounded shadow", onClick: ()=>setCurrentProject(project), __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, project.name))), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold mb-4 cursor-pointer", onClick: ()=>setShowNotifications(!showNotifications), __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Notifications"), showNotifications && /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, notifications.map((notification, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-2 bg-red-200 text-red-800 rounded shadow", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, notification)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-8 font-sans", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Project Kanban"), /*#__PURE__*/ React.createElement("select", { className: "mb-4 p-2 border rounded", onChange: handleProjectChange, name: "projects", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, projects.map((project)=>/*#__PURE__*/ React.createElement("option", { key: project.name, value: project.name, __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, project.name))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, [ "todo", "inProgress", "done" ].map((status)=>{ const tasks = currentProject && currentProject[status] ? currentProject[status] : []; const statusTitle = status === 'todo' ? 'Todo' : status === 'inProgress' ? 'In Progress' : 'Done'; return /*#__PURE__*/ React.createElement("div", { key: status, className: "bg-gray-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, statusTitle), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, tasks.map((task, index)=>{ const deadline = new Date(task.deadline); const deadlineString = `${deadline.getFullYear()}-${deadline.getMonth() + 1}-${deadline.getDate()}`; return /*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 bg-white rounded shadow", __source: { fileName: "", lineNumber: 93, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 25 }, __self: this }, task.text), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 95, columnNumber: 25 }, __self: this }, "期限: ", deadlineString)); }))); })))); }