function NewComponent({ placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "task", placeholder: placeholder, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { placeholder: "Add new task", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tasks, setTasks] = React.useState([ { text: 'Sample Task 1', color: 'bg-blue-100', iconColor: 'text-blue-500' }, { text: 'Sample Task 2', color: 'bg-green-100', iconColor: 'text-green-500' } ]); const [newTask, setNewTask] = React.useState(""); const handleInputChange = (e)=>{ setNewTask(e.target.value); }; const handleAddTask = ()=>{ if (newTask.trim()) { setTasks([ ...tasks, { text: newTask, color: 'bg-gray-100', iconColor: 'text-gray-500' } ]); setNewTask(""); } }; const onDragEnd = (result)=>{ if (!result.destination) return; const reorderedTasks = Array.from(tasks); const [movedTask] = reorderedTasks.splice(result.source.index, 1); reorderedTasks.splice(result.destination.index, 0, movedTask); setTasks(reorderedTasks); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { placeholder: "Add new task", value: newTask, name: "task", onChange: handleInputChange, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddTask, className: "mt-2 p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Add Task")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("div", { key: index, draggable: "true", className: `${task.color} p-2 border border-gray-300 rounded flex items-center justify-between mb-2`, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, task.text), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-palette ${task.iconColor}`, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `fas fa-icons ${task.iconColor}`, __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars cursor-grab", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this })))))); }