function AddExpensesButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-red-500 text-white font-bold rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Add Expenses"); } function AddExpensesButtonStory() { const handleAddExpenses = ()=>{ alert('Expenses added!'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AddExpensesButton, { onClick: handleAddExpenses, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function IncomeAndExpensesTracker() { const [income, setIncome] = React.useState(0); const [expenses, setExpenses] = React.useState(0); const [incomeInput, setIncomeInput] = React.useState(""); const [expensesInput, setExpensesInput] = React.useState(""); const balance = income - expenses; const addIncome = ()=>{ setIncome((prev)=>prev + parseFloat(incomeInput) || 0); setIncomeInput(""); }; const addExpenses = ()=>{ setExpenses((prev)=>prev + parseFloat(expensesInput) || 0); setExpensesInput(""); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-md rounded-md w-full max-w-[800px]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text font-bold mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Financial Tally"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-crimson-text mb-2", htmlFor: "income", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Income:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "income", id: "income", className: "w-full p-2 border border-gray-300 rounded", onChange: (e)=>setIncomeInput(e.target.value), value: incomeInput, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-blue-500 text-white font-bold rounded", onClick: addIncome, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Add Income")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-crimson-text mb-2", htmlFor: "expenses", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Expenses:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "expenses", id: "expenses", className: "w-full p-2 border border-gray-300 rounded", onChange: (e)=>setExpensesInput(e.target.value), value: expensesInput, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(AddExpensesButton, { onClick: addExpenses, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Balance: "), balance)); } function IncomeAndExpensesTrackerStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-8", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IncomeAndExpensesTracker, { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IncomeAndExpensesTracker, { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-8", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IncomeAndExpensesTracker, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); }