function MainComponent({ logo, siteName, menuItems }) { const [isOpen, setIsOpen] = React.useState(false); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("nav", { className: "bg-white", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-7", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center py-4 px-2", __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo, alt: "Logo", className: "h-8 w-8 mr-2", __source: { fileName: "", lineNumber: 12, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-poppins text-gray-800 text-xl", __source: { fileName: "", lineNumber: 13, columnNumber: 19 }, __self: this }, siteName))), /*#__PURE__*/ React.createElement("div", { className: `hidden md:flex items-center space-x-1 ${isOpen ? "block" : ""}`, __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("a", { href: item.href, key: item.title, className: "py-4 px-2 text-gray-700 hover:text-gray-900 font-noto-sans-jp", __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this }, item.title)))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "outline-none mobile-menu-button", onClick: ()=>setIsOpen(!isOpen), __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6 text-gray-500 hover:text-gray-600", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M4 6h16M4 12h16m-16 6h16", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }))))))), isOpen && /*#__PURE__*/ React.createElement("div", { className: "overlay", onClick: ()=>setIsOpen(false), __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), isOpen && /*#__PURE__*/ React.createElement("button", { className: "fixed top-0 left-0 mt-5 ml-5 p-0 bg-transparent rounded-full z-50", onClick: ()=>setIsOpen(false), __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "white", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 right-0 w-[80%] h-full bg-white p-4 transform ease-in-out duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"}`, style: { zIndex: isOpen ? 50 : -1 }, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("a", { href: item.href, key: item.title, className: "block py-2 px-4 text-sm hover:bg-gray-200", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, item.title)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, ` body { margin: 0; } .overlay { background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 40; display: ${isOpen ? "block" : "none"}; } `)); } function StoryComponent() { const demoMenuItems = [ { title: "機能", href: "#" }, { title: "価格", href: "#" }, { title: "ドキュメント", href: "#" }, { title: "サポート", href: "#" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 122, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { logo: "./logo.svg", siteName: "My Website", menuItems: demoMenuItems, __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this })); }