function MainComponent() { const [incomes, setIncomes] = React.useState([]); const [expenses, setExpenses] = React.useState([]); const [investments, setInvestments] = React.useState([]); const [liabilities, setLiabilities] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); const { name, amount } = event.target.elements; switch(name.value){ case 'income': setIncomes([ ...incomes, Number(amount.value) ]); break; case 'expense': setExpenses([ ...expenses, Number(amount.value) ]); break; case 'investment': setInvestments([ ...investments, Number(amount.value) ]); break; case 'liability': setLiabilities([ ...liabilities, Number(amount.value) ]); break; default: break; } event.target.reset(); }; const totalIncomes = incomes.reduce((acc, curr)=>acc + curr, 0); const totalExpenses = expenses.reduce((acc, curr)=>acc + curr, 0); const totalInvestments = investments.reduce((acc, curr)=>acc + curr, 0); const totalLiabilities = liabilities.reduce((acc, curr)=>acc + curr, 0); const netIncome = totalIncomes - totalExpenses; const netWorth = totalInvestments - totalLiabilities; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container max-w-4xl bg-white shadow rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#2c3e50] p-6 text-white text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Personal Finance App")), /*#__PURE__*/ React.createElement("main", { className: "p-8", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-wrap mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "amount", type: "number", className: "border p-2 rounded w-full text-lg", placeholder: "Amount", required: true, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-2 flex justify-between", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "name", className: "border p-2 rounded text-lg w-full md:w-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "income", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "Income"), /*#__PURE__*/ React.createElement("option", { value: "expense", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Expense"), /*#__PURE__*/ React.createElement("option", { value: "investment", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "Investment"), /*#__PURE__*/ React.createElement("option", { value: "liability", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "Liability")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-2 p-2 bg-[#3498db] text-white rounded text-lg w-full md:w-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Add"))), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1abc9c] text-white p-5 rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-3", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Income & Expenses"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Total Income: $", totalIncomes), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Total Expenses: $", totalExpenses), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Net Income: $", netIncome))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#3498db] text-white p-5 rounded-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-3", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Investments & Liabilities"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Total Investments: $", totalInvestments), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Total Liabilities: $", totalLiabilities), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Net Worth: $", netWorth)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, ` @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes grow { 0% { transform: scale(0.95); } 100% { transform: scale(1); } } main { animation: fade-in 0.5s ease-in-out, grow 0.5s ease-in-out; } `)); }