function MainComponent() { const [habitualTasks, setHabitualTasks] = React.useState([ "Task 1", "Task 2", "Task 3" ]); const [todayTasks, setTodayTasks] = React.useState([ "Task A", "Task B" ]); const [nowTasks, setNowTasks] = React.useState([ "Task X" ]); const onDragStart = (e, task, type)=>{ e.dataTransfer.setData("task", task); e.dataTransfer.setData("type", type); }; const onDrop = (e, type)=>{ const task = e.dataTransfer.getData("task"); const fromType = e.dataTransfer.getData("type"); if (fromType === "habitual" && type === "today") { setHabitualTasks(habitualTasks.filter((t)=>t !== task)); setTodayTasks([ ...todayTasks, task ]); } else if (fromType === "today" && type === "now") { setTodayTasks(todayTasks.filter((t)=>t !== task)); setNowTasks([ ...nowTasks, task ]); } }; const onTaskClick = (task)=>{ setNowTasks(nowTasks.filter((t)=>t !== task)); }; const habitualTasksList = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 bg-[#f0f0f0] rounded-lg w-full", onDragOver: (e)=>e.preventDefault(), onDrop: (e)=>onDrop(e, "today"), __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "習慣的にやること"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, habitualTasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task, className: "p-2 bg-[#e0e0e0] rounded-md draggable cursor-pointer", draggable: true, onDragStart: (e)=>onDragStart(e, task, "habitual"), __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, task)))); const todayTasksList = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 bg-[#f0f0f0] rounded-lg w-full", onDragOver: (e)=>e.preventDefault(), onDrop: (e)=>onDrop(e, "now"), __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "今日やること"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, todayTasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task, className: "p-2 bg-[#e0e0e0] rounded-md draggable cursor-pointer", draggable: true, onDragStart: (e)=>onDragStart(e, task, "today"), __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, task)))); const nowTasksList = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 bg-[#f0f0f0] rounded-lg w-full", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "今やること"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, nowTasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task, className: "p-2 bg-[#e0e0e0] rounded-md draggable cursor-pointer", onClick: ()=>onTaskClick(task), __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, task)))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, "タスク管理アプリ"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-[1200px]", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, nowTasksList, todayTasksList, habitualTasksList), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, ` .draggable { transition: background-color 0.2s ease; } .draggable:hover { background-color: #d0d0d0; } `)); }