function MainComponent() { const [user, setUser] = React.useState({ username: '', email: '', password: '' }); const [qrCodeData, setQrCodeData] = React.useState(''); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [isRegistered, setIsRegistered] = React.useState(false); const handleInputChange = (e)=>{ const { name, value } = e.target; setUser({ ...user, [name]: value }); }; const handleRegistration = (e)=>{ e.preventDefault(); setIsRegistered(true); generateQrCode(user.username); }; const handleLogin = (e)=>{ e.preventDefault(); if (user.username && user.password) setIsLoggedIn(true); }; const generateQrCode = (data)=>{ setQrCodeData(`QRCodeData:${data}`); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-6 text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, isLoggedIn ? 'ようこそ' : isRegistered ? 'QRコード' : 'ユーザー登録'), !isLoggedIn && !isRegistered && /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleRegistration, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", id: "username", name: "username", value: user.username, onChange: handleInputChange, __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "メール"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "email", id: "email", name: "email", value: user.email, onChange: handleInputChange, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "password", id: "password", name: "password", value: user.password, onChange: handleInputChange, __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white px-4 py-2 rounded-lg font-roboto hover:bg-blue-600 transition-all", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "登録する")), isRegistered && !isLoggedIn && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "こちらがあなたのQRコードです。"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, qrCodeData)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsRegistered(false), className: "w-full bg-blue-500 text-white px-4 py-2 rounded-lg font-roboto hover:bg-blue-600 transition-all", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "ログイン画面へ")), !isLoggedIn && !isRegistered && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "すでにアカウントをお持ちですか？"), /*#__PURE__*/ React.createElement("a", { href: "#", onClick: (e)=>{ e.preventDefault(); setIsRegistered(false); }, className: "text-blue-500 font-roboto hover:underline", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "ログインする")), !isLoggedIn && isRegistered && /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: handleLogin, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "usernameLogin", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", id: "usernameLogin", name: "username", value: user.username, onChange: handleInputChange, __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "passwordLogin", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "password", id: "passwordLogin", name: "password", value: user.password, onChange: handleInputChange, __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white px-4 py-2 rounded-lg font-roboto hover:bg-blue-600 transition-all", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "ログイン")))); }