function MainComponent() { const [boards, setBoards] = React.useState([ { id: 1, title: "To Do", tasks: [ "Task 1", "Task 2" ] }, { id: 2, title: "In Progress", tasks: [ "Task 3" ] }, { id: 3, title: "Done", tasks: [ "Task 4" ] } ]); const [newBoardTitle, setNewBoardTitle] = React.useState(''); const [newTask, setNewTask] = React.useState(''); const [selectedBoard, setSelectedBoard] = React.useState(null); const addBoard = ()=>{ const newBoard = { id: boards.length + 1, title: newBoardTitle, tasks: [] }; setBoards([ ...boards, newBoard ]); setNewBoardTitle(''); }; const addTask = ()=>{ const updatedBoards = boards.map((board)=>{ if (board.id === selectedBoard) { return { ...board, tasks: [ ...board.tasks, newTask ] }; } return board; }); setBoards(updatedBoards); setNewTask(''); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-[#333] text-2xl mb-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Task Manager"), /*#__PURE__*/ React.createElement("input", { className: "border p-1 mr-2", placeholder: "New Board Title", name: "boardTitle", value: newBoardTitle, onChange: (e)=>setNewBoardTitle(e.target.value), __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-1 rounded", onClick: addBoard, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Add Board")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 overflow-x-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, boards.map((board)=>/*#__PURE__*/ React.createElement("div", { key: board.id, className: "w-[300px] bg-white rounded shadow p-4 flex flex-col gap-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, board.title), board.tasks.map((task, taskIndex)=>/*#__PURE__*/ React.createElement("div", { key: taskIndex, className: "p-2 bg-[#f0f0f0] rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, task)), selectedBoard === board.id ? /*#__PURE__*/ React.createElement("div", { className: "mt-auto", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-1 mr-2", placeholder: "New Task", name: "taskName", value: newTask, onChange: (e)=>setNewTask(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-1 rounded", onClick: addTask, __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "Add Task")) : /*#__PURE__*/ React.createElement("button", { className: "mt-auto bg-gray-200 text-gray-700 px-4 py-1 rounded", onClick: ()=>setSelectedBoard(board.id), __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Add Task"))))); }