function MainComponent() { const [budgetItems, setBudgetItems] = React.useState([ { id: 1, name: '', amount: '' } ]); const handleBudgetItemChange = (id, field, value)=>{ setBudgetItems((currentBudgetItems)=>currentBudgetItems.map((item)=>item.id === id ? { ...item, [field]: value } : item)); }; const addBudgetItem = ()=>{ setBudgetItems((currentBudgetItems)=>[ ...currentBudgetItems, { id: currentBudgetItems.length + 1, name: '', amount: '' } ]); }; const removeBudgetItem = (id)=>{ setBudgetItems((currentBudgetItems)=>currentBudgetItems.filter((item)=>item.id !== id)); }; const totalBudgetAmount = budgetItems.map((item)=>parseFloat(item.amount) || 0).reduce((sum, current)=>sum + current, 0); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#f0f4f7]", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#0078d7] p-4 text-white font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "ybab")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Budget Editor"), /*#__PURE__*/ React.createElement("button", { onClick: addBudgetItem, className: "px-4 py-2 bg-green-500 text-white rounded font-semibold", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "+ Add Item")), budgetItems.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Budget item name", value: item.name, onChange: (e)=>handleBudgetItemChange(item.id, 'name', e.target.value), className: "flex-grow mr-4 p-2 border rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", placeholder: "Amount", value: item.amount, onChange: (e)=>handleBudgetItemChange(item.id, 'amount', e.target.value), className: "w-24 p-2 border rounded mr-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeBudgetItem(item.id), className: "text-red-500 text-xl", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "🗑️"))), /*#__PURE__*/ React.createElement("div", { className: "pt-4 mt-4 border-t", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "$", totalBudgetAmount.toFixed(2))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#0078d7] p-4 text-white text-center font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "ybab Budget Editor")); }