function MainComponent({ posts }) { const [menuOpen, setMenuOpen] = React.useState(false); const postItems = posts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-4 bg-gray-100 rounded-lg shadow", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-crimson-text", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, post.snippet), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, post.date))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 text-white shadow-lg", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex flex-wrap p-5 flex-row items-center", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "flex items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://storage.googleapis.com/lazy-icons/not-found-placeholder.webp", className: "rounded-full w-10 h-10 mr-2", alt: "App Logo", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0 text-xl", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "App Name")), /*#__PURE__*/ React.createElement("div", { className: "ml-auto flex space-x-4 desktop-nav hidden md:flex", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "home-button font-mono text-gray-300 hover:text-white py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMenuOpen(!menuOpen), className: "md:hidden text-gray-300 hover:text-white inline-flex items-center p-1 ml-auto text-sm rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 12h16m-7 6h7", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this })))), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-gray-800", id: "mobile-menu", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block px-6 py-2 text-gray-300 hover:text-white font-roboto", onClick: ()=>setMenuOpen(false), __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Home"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow container mx-auto px-6 py-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-crimson-text", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Welcome to My Flask App"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "This is a sample Flask application with a structured layout."), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, postItems)), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "© 2023 My Flask App. All rights reserved.")))); } function StoryComponent() { const posts = [ { title: "First Blog Post", snippet: "This is the first blog post snippet.", date: "2023-10-01" }, { title: "Second Blog Post", snippet: "This is the second blog post snippet.", date: "2023-10-02" }, { title: "Third Blog Post", snippet: "This is the third blog post snippet.", date: "2023-10-03" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { posts: posts, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this })); }