function MainComponent() { const [tasks, setTasks] = React.useState([ "Task 1", "Task 2", "Task 3" ]); const [timeline, setTimeline] = React.useState([]); const handleDragStart = (event, task)=>{ event.dataTransfer.setData("text", task); }; const handleDragOver = (event)=>{ event.preventDefault(); }; const handleDrop = (event)=>{ const task = event.dataTransfer.getData("text"); setTimeline((currentTimeline)=>[ ...currentTimeline, task ]); setTasks((currentTasks)=>currentTasks.filter((t)=>t !== task)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-start h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row w-full max-w-[1000px] p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#ededed] p-4 shadow-lg", onDragOver: handleDragOver, onDrop: handleDrop, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] text-lg mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "What to Do"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-[#ffffff] p-2 shadow cursor-pointer", draggable: true, onDragStart: (e)=>handleDragStart(e, task), __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, task)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-8 bg-[#ffffff] p-4 shadow-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] text-lg mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Timeline"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute border-l-2 border-[#121212] h-full left-1/2", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, timeline.map((time, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "pl-8", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, time))))))); }