function MainComponent() { const [number1, setNumber1] = React.useState(0); const [number2, setNumber2] = React.useState(0); const [result, setResult] = React.useState(null); const handleAddition = ()=>{ setResult(number1 + number2); }; const handleSubtraction = ()=>{ setResult(number1 - number2); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "足し算と引き算をする"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-roboto", htmlFor: "number1", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "第一の番号:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "number1", name: "number1", className: "w-full p-2 border border-gray-300 rounded", value: number1, onChange: (e)=>setNumber1(Number(e.target.value)), __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-roboto", htmlFor: "number2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "第二の番号:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "number2", name: "number2", className: "w-full p-2 border border-gray-300 rounded", value: number2, onChange: (e)=>setNumber2(Number(e.target.value)), __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 font-roboto", onClick: handleAddition, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "足し算"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 font-roboto", onClick: handleSubtraction, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "引き算")), result !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl text-center font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "結果: ", result))); }