function MainComponent() { const [income, setIncome] = React.useState(''); const [deductions, setDeductions] = React.useState(''); const [result, setResult] = React.useState(''); const calculate = ()=>{ const taxResult = Number(income) - Number(deductions); setResult(`課税対象額: ${taxResult.toLocaleString()}円`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen gap-8 p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-center", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "年末調整を手伝ってくれるアプリ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md", onSubmit: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "income", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "年収"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "income", type: "number", placeholder: "年収を入力してください", name: "income", value: income, onChange: (e)=>setIncome(e.target.value), __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "deductions", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "控除額"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "deductions", type: "number", placeholder: "控除額を入力してください", name: "deductions", value: deductions, onChange: (e)=>setDeductions(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: calculate, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "計算する")), result && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 20 }, __self: this }, result))); }