function MainComponent() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const handleNewTaskChange = (event)=>{ setNewTask(event.target.value); }; const handleAddTask = (event)=>{ event.preventDefault(); if (newTask) { setTasks([ ...tasks, { title: newTask, status: 'backlog' } ]); setNewTask(''); } }; const moveTask = (index, direction)=>{ const newTasks = [ ...tasks ]; newTasks[index].status = direction === 'next' ? newTasks[index].status === 'backlog' ? 'in-progress' : 'completed' : newTasks[index].status === 'completed' ? 'in-progress' : 'backlog'; setTasks(newTasks); }; const taskColumns = { backlog: [], 'in-progress': [], completed: [] }; tasks.forEach((task, index)=>{ taskColumns[task.status].push(/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white p-4 m-2 shadow rounded flex justify-between items-center fade-in", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-800", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, task.title), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-700", onClick: ()=>moveTask(index, 'prev'), disabled: task.status === 'backlog', __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "👈"), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-700 ml-2", onClick: ()=>moveTask(index, 'next'), disabled: task.status === 'completed', __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "👉")))); }); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Kan Ban CRM"))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddTask, className: "max-w-7xl mx-auto py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "new-task", value: newTask, onChange: handleNewTaskChange, placeholder: "Enter a new task...", className: "block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-l-md", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-3 py-2 rounded-r-md", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Add Task"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-3", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Backlog"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, taskColumns.backlog)), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-3", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "In Progress"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, taskColumns['in-progress'])), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-3", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Completed"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, taskColumns.completed)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }