function MainComponent({ logoSrc }) { const [isOpen, setIsOpen] = React.useState(false); return /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between px-4 py-2 bg-white shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Company Logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#features", className: "text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("a", { href: "#pricing", className: "text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "hidden md:block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Console"), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-gray-700 hover:text-gray-900", onClick: ()=>setIsOpen(true), __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this })), isOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed right-0 top-0 bottom-0 w-64 bg-white p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-gray-700 hover:text-gray-900", onClick: ()=>setIsOpen(false), __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "flex flex-col space-y-4 mt-12", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#features", className: "text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("a", { href: "#pricing", className: "text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "mt-6 w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Console")))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { logoSrc: "https://www.bambam.ai/assets/images/image01.png?v=a06da336", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this })); }