function MainComponent() { const [expenses, setExpenses] = React.useState([]); const [expenseName, setExpenseName] = React.useState(''); const [amount, setAmount] = React.useState(''); const [date, setDate] = React.useState(''); const handleAddExpense = (event)=>{ event.preventDefault(); if (expenseName.trim() !== '' && amount.trim() !== '' && date.trim() !== '') { const newExpense = { expenseName, amount, date }; setExpenses([ ...expenses, newExpense ]); setExpenseName(''); setAmount(''); setDate(''); } }; const handleExpenseNameChange = (event)=>{ setExpenseName(event.target.value); }; const handleAmountChange = (event)=>{ setAmount(event.target.value); }; const handleDateChange = (event)=>{ setDate(event.target.value); }; const handleRemoveExpense = (index)=>{ setExpenses(expenses.filter((_, i)=>i !== index)); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Expenses Management"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleAddExpense, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "expenseName", placeholder: "Expense Name", className: "w-full p-2 border border-gray-300 rounded mb-2", value: expenseName, onChange: handleExpenseNameChange, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", placeholder: "Amount", className: "w-full p-2 border border-gray-300 rounded mb-2", value: amount, onChange: handleAmountChange, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "w-full p-2 border border-gray-300 rounded mb-4", value: date, onChange: handleDateChange, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Add Expense")), /*#__PURE__*/ React.createElement("ul", { className: "list-disc space-y-2", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, expenses.map((expense, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center bg-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, `${expense.expenseName} - $${expense.amount} - ${expense.date}`), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700", onClick: ()=>handleRemoveExpense(index), __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "🗑️"))))); }