function MainComponent() { const [dragging, setDragging] = React.useState(false); const [editing, setEditing] = React.useState(null); const [tasks, setTasks] = React.useState({ 'To Do': [ 'Task 1', 'Task 2' ], 'In Progress': [ 'Task 3' ], 'Done': [ 'Task 4' ] }); const onDragStart = (e)=>{ setDragging(true); }; const onDragOver = (e)=>{ e.preventDefault(); }; const onDrop = (e, category)=>{ setDragging(false); }; const editTask = (category, index)=>{ setEditing({ category, index }); }; const saveTask = (e, category, index)=>{ e.preventDefault(); const newTasks = { ...tasks }; newTasks[category][index] = e.target.task.value; setTasks(newTasks); setEditing(null); }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[60px] bg-white shadow h-screen flex flex-col justify-between", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full h-[60px] flex items-center justify-center hover:bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home text-gray-600", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full h-[60px] flex items-center justify-center hover:bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope text-gray-600", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full h-[60px] flex items-center justify-center hover:bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-right text-gray-600", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full h-[60px] flex items-center justify-center hover:bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-tasks text-gray-600", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "w-full h-[60px] flex items-center justify-center hover:bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cog text-gray-600", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, Object.entries(tasks).map(([category, tasks], index, array)=>/*#__PURE__*/ React.createElement("div", { key: category, className: `flex-1 p-4 ${index !== array.length - 1 ? 'border-r border-gray-300' : ''}`, onDragOver: dragging ? onDragOver : null, onDrop: (e)=>onDrop(e, category), __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, category), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, tasks.map((task, index)=>editing?.category === category && editing?.index === index ? /*#__PURE__*/ React.createElement("form", { key: index, onSubmit: (e)=>saveTask(e, category, index), className: "mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "task", type: "text", defaultValue: task, className: "border p-2 w-full", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 border bg-blue-500 text-white", __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }, "Save")) : /*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-3 mb-2 shadow cursor-pointer flex justify-between items-center", draggable: true, onDragStart: onDragStart, __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, task, /*#__PURE__*/ React.createElement("button", { onClick: ()=>editTask(category, index), __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit text-gray-600", __source: { fileName: "", lineNumber: 87, columnNumber: 23 }, __self: this }))))))))); }