function TodoAppUi({ heading, placeholder, buttonText }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, heading), /*#__PURE__*/ React.createElement("form", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "todo", placeholder: placeholder, className: "w-full px-3 py-2 mb-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white py-2 rounded-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, buttonText)))); } function TodoAppUiStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TodoAppUi, { heading: "Todo App", placeholder: "Add a new task", buttonText: "Add Task", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(""); const handleInputChange = (e)=>{ setNewTask(e.target.value); }; const handleFormSubmit = (e)=>{ e.preventDefault(); if (newTask.trim() !== "") { setTasks([ ...tasks, newTask ]); setNewTask(""); } }; const handleDeleteTask = (taskToDelete)=>{ setTasks(tasks.filter((task)=>task !== taskToDelete)); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TodoAppUi, { heading: "Todo App", placeholder: "Add a new task", buttonText: "Add Task", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white rounded-lg shadow-md p-6 mt-6", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "todo", value: newTask, onChange: handleInputChange, placeholder: "Add a new task", className: "w-full px-3 py-2 mb-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white py-2 px-3 rounded-lg hover:bg-green-700", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Add Task")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center p-4 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, task), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700", onClick: ()=>handleDeleteTask(task), __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }))))))); }