function MainComponent({ mode, setMode }) { const [showSignup, setShowSignup] = React.useState(false); const [showSignin, setShowSignin] = React.useState(false); const handleSignupClick = ()=>setShowSignup(true); const handleSigninClick = ()=>setShowSignin(true); const handleCloseSignup = ()=>setShowSignup(false); const handleCloseSignin = ()=>setShowSignin(false); let headerContent; if (mode === "loggedOut") { headerContent = /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-4 p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSignupClick, className: "font-roboto bg-[#1a1aff] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Signup"), /*#__PURE__*/ React.createElement("button", { onClick: handleSigninClick, className: "font-roboto bg-[#1a1aff] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Signin"), showSignup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 24 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCloseSignup, className: "absolute top-2 right-2 text-xl", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "✖"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", className: "border p-2 w-full", placeholder: "ユーザ名", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#1a1aff] text-white py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "登録")))), showSignin && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 24 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCloseSignin, className: "absolute top-2 right-2 text-xl", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "✖"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", className: "border p-2 w-full", placeholder: "ユーザ名", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#1a1aff] text-white py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "ログイン"))))); } else if (mode === "loggedIn") { headerContent = /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#00D1B2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "QRコード"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#00D1B2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "ユーザー情報"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#00D1B2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "アンケート情報"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#00D1B2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "結果確認"))); } return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#333333] text-white", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, headerContent)); } function StoryComponent() { const [mode, setMode] = React.useState("loggedOut"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("loggedOut"), className: "font-roboto m-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "Show Logged Out"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("loggedIn"), className: "font-roboto m-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Show Logged In"), /*#__PURE__*/ React.createElement(MainComponent, { mode: mode, setMode: setMode, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); }