function MainComponent({ username, rank }) { const [menuOpen, setMenuOpen] = React.useState(false); const toggleMenu = ()=>{ setMenuOpen(!menuOpen); }; return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between bg-gray-500 p-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[24px] h-[24px]", onClick: toggleMenu, __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-white text-lg cursor-pointer", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-white font-normal", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "yamacomi"), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-gray-500 px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "ログイン")), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-screen bg-gray-500 z-10", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-white text-2xl cursor-pointer", onClick: toggleMenu, __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-6", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[64px] h-[64px] bg-white rounded-full flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-gray-500 text-2xl", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "yoshidon"), /*#__PURE__*/ React.createElement("div", { className: "text-white text-xs", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "マイページを表示")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full mt-6 text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-400 flex items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history mr-3", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }), "閲覧履歴"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-400 flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart mr-3", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }), "購入履歴"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-400 flex items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star mr-3", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), "お気に入り"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-400 flex items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog mr-3", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }), "アカウント設定"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-400 flex items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-3", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), "ログアウト")))); } function StoryComponent() { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(MainComponent, { username: "yamacomi", rank: 3, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); }