function MainComponent() { const [income, setIncome] = React.useState(''); const [expenses, setExpenses] = React.useState(''); const [result, setResult] = React.useState(null); const handleIncomeChange = (event)=>{ setIncome(event.target.value); }; const handleExpensesChange = (event)=>{ setExpenses(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); const netIncome = Number(income) - Number(expenses); setResult(netIncome); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl mb-8 text-[#121212]", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "予算計算ツール"), /*#__PURE__*/ React.createElement("form", { className: "w-[90%] max-w-[400px] p-4 border rounded-lg bg-white shadow-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "income", className: "block font-roboto text-sm mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "月収 (円)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "income", name: "income", className: "w-full p-2 mb-4 font-roboto text-[#121212] border rounded-lg", placeholder: "月収を入力", value: income, onChange: handleIncomeChange, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "expenses", className: "block font-roboto text-sm mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "固定費 (円)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "expenses", name: "expenses", className: "w-full p-2 font-roboto text-[#121212] border rounded-lg", placeholder: "固定費を入力", value: expenses, onChange: handleExpensesChange, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "font-roboto bg-[#4CAF50] text-white py-2 px-8 rounded-lg hover:bg-[#45a049]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "計算"))), result !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "残り予算: ", result, "円")); }