function MainComponent() { const [balance, setBalance] = React.useState(0); const [tradeAmount, setTradeAmount] = React.useState(''); const [exchangeRate, setExchangeRate] = React.useState(1.0); const [result, setResult] = React.useState(null); React.useEffect(()=>{ fetch('https://api.exchangerate-api.com/v4/latest/USD').then((response)=>response.json()).then((data)=>setExchangeRate(data.rates.JPY)); }, []); const handleTrade = ()=>{ const newBalance = balance + parseFloat(tradeAmount) * exchangeRate; setResult(newBalance); }; const handleInputChange = (e)=>{ setTradeAmount(e.target.value); }; const handleBalanceChange = (e)=>{ setBalance(parseFloat(e.target.value)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "FX取引シミュレーション"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "現在の取引残高 (USD):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "balance", value: balance, onChange: handleBalanceChange, className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "取引額 (USD):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "tradeAmount", value: tradeAmount, onChange: handleInputChange, className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleTrade, className: "w-full bg-blue-500 text-white py-2 px-4 rounded-md font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "トレード"), result !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-green-100 text-green-700 rounded-md", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "新しい取引残高 (JPY): ", result.toFixed(2)))); }