function MainComponent() { const [points, setPoints] = React.useState(0); const [receivedPoints, setReceivedPoints] = React.useState(0); const [isAuthenticated, setIsAuthenticated] = React.useState(false); const handleGetPoints = ()=>{ setPoints(points + 1); }; const handleSendPoints = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const sentPoints = Number(formData.get('points')); if (points >= sentPoints) { setPoints(points - sentPoints); } else { alert('ポイントが足りません'); } }; const handleReceivePoints = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const receivedPoints = Number(formData.get('points')); setReceivedPoints(receivedPoints + Number(formData.get('currentPoints') || 0)); event.target.reset(); }; const handleLogin = (event)=>{ event.preventDefault(); setIsAuthenticated(true); }; const handleGoogleLogin = ()=>{ setIsAuthenticated(true); }; const handleLogout = ()=>{ setIsAuthenticated(false); }; const handleSignup = (event)=>{ event.preventDefault(); setIsAuthenticated(true); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, !isAuthenticated ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl text-center mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("form", { className: "font-roboto max-w-md mx-auto p-4 bg-gray-100 rounded", onSubmit: handleLogin, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "login-username", className: "block mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "ユーザー名:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", id: "login-username", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "login-password", className: "block mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "パスワード:"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", id: "login-password", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "ログイン"))), /*#__PURE__*/ React.createElement("div", { className: "text-center my-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGoogleLogin, className: "bg-red-500 text-white font-roboto py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google mr-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }), "Googleでログイン")), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl text-center my-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "または"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl text-center mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "アカウント作成"), /*#__PURE__*/ React.createElement("form", { className: "font-roboto max-w-md mx-auto p-4 bg-gray-100 rounded", onSubmit: handleSignup, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "signup-username", className: "block mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "ユーザー名:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", id: "signup-username", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "signup-password", className: "block mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "パスワード:"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", id: "signup-password", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white font-roboto py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "アカウント作成")))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl text-center mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "ポイントの獲得ゲーム"), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, className: "bg-red-500 text-white font-roboto py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "ログアウト")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGetPoints, className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "ポイントを獲得")), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl text-center mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "あなたのポイント: ", points), /*#__PURE__*/ React.createElement("form", { className: "font-roboto max-w-md mx-auto p-4 bg-gray-100 rounded", onSubmit: handleSendPoints, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username-send", className: "block mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "ユーザー名:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", id: "username-send", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "points-send", className: "block mb-2", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "送るポイント数:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "points", id: "points-send", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white font-roboto py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "ポイントを送る"))), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl text-center mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "ポイントを受け取る"), /*#__PURE__*/ React.createElement("form", { className: "font-roboto max-w-md mx-auto p-4 bg-gray-100 rounded", onSubmit: handleReceivePoints, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username-receive", className: "block mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "ユーザー名:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", id: "username-receive", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "points-receive", className: "block mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "受け取るポイント数:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "points", id: "points-receive", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "ポイントを受け取る"))), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl text-center mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "受け取ったポイント: ", receivedPoints))); }