function MainComponent() { const [budget, setBudget] = React.useState(1000); const [products, setProducts] = React.useState([]); const [newProductName, setNewProductName] = React.useState(''); const [newProductPrice, setNewProductPrice] = React.useState(''); const [showNoBudgetMessage, setShowNoBudgetMessage] = React.useState(false); const handleAddProduct = ()=>{ const updatedBudget = budget - parseFloat(newProductPrice || 0); if (updatedBudget >= 0) { setProducts([ ...products, { name: newProductName, price: parseFloat(newProductPrice || 0) } ]); setBudget(updatedBudget); setNewProductName(''); setNewProductPrice(''); setShowNoBudgetMessage(false); } else { setShowNoBudgetMessage(true); } }; const handleRemoveProduct = (indexToRemove)=>{ const removedProduct = products[indexToRemove]; setBudget((prevBudget)=>prevBudget + removedProduct.price); setProducts((prevProducts)=>prevProducts.filter((_, index)=>index !== indexToRemove)); setShowNoBudgetMessage(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Budget Tracker"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "Current Budget: ", /*#__PURE__*/ React.createElement("span", { className: `${budget < 0 ? 'text-red-500' : 'text-[#4caf50]'}`, __source: { fileName: "", lineNumber: 32, columnNumber: 62 }, __self: this }, "$", budget.toFixed(2))), showNoBudgetMessage && /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 33, columnNumber: 41 }, __self: this }, "No budget left!")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", placeholder: "Product Name", value: newProductName, onChange: (e)=>setNewProductName(e.target.value), className: "border p-2 mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "productPrice", placeholder: "Price", min: "0", value: newProductPrice, onChange: (e)=>setNewProductPrice(e.target.value), className: "border p-2 mr-2", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(React.Fragment, null)), products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center p-2 mb-2 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, "$", product.price.toFixed(2)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveProduct(index), className: "text-red-500", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }, "Remove")))); }