function MainComponent() { const [currentPage, setCurrentPage] = React.useState('home'); const [searchTerm, setSearchTerm] = React.useState(''); const blogPosts = [ { id: 1, thumbnail: './images/post1.jpg', title: 'Exploring the Future of Technology', description: 'A deep dive into what the future holds for technology.' }, { id: 2, thumbnail: './images/post2.jpg', title: 'The Art of Minimalism', description: 'How minimalism can not only clear your space but your mind as well.' }, { id: 3, thumbnail: './images/post3.jpg', title: 'Cultivating Creativity', description: 'Techniques and habits to foster creativity in your daily life.' } ]; const filteredPosts = searchTerm.length > 0 ? blogPosts.filter((post)=>post.title.toLowerCase().includes(searchTerm.toLowerCase())) : blogPosts; const pages = { home: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#121212] space-y-8", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-roboto text-[#61DAFB]", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Welcome to Our Blog"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-white", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Explore a world of knowledge"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#61DAFB] hover:bg-[#4BA8D9] text-white font-bold py-3 px-6 rounded transition ease-in duration-200", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Discover More")), about: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#121212] space-y-4 p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto text-[#61DAFB]", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "About This Blog"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "We share unique insights, tips, and stories from various fields. Authored by John Doe, a passionate writer focused on enriching readers' lives.")), blog: /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search posts...", className: "px-4 py-2 rounded text-black", onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "px-4 py-2 rounded text-black", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "All Categories"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Technology"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Lifestyle"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Culture"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, filteredPosts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "p-4 bg-[#1E1E1E] rounded-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.thumbnail, alt: `Thumbnail for ${post.title}`, className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto text-[#61DAFB] mt-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, post.description))))), contact: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#121212] p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto text-[#61DAFB] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Get in Touch"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Your name", className: "px-4 py-2 mb-3 rounded text-black", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Your email", className: "px-4 py-2 mb-3 rounded text-black", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Your message", className: "px-4 py-2 mb-3 rounded text-black", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#61DAFB] hover:bg-[#4BA8D9] text-white font-bold py-2 px-4 rounded transition ease-in duration-200", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Send Message"))) }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "py-4 px-8 bg-[#242424] flex justify-between items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#61DAFB] font-bold text-xl", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "BlogName"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white px-4", onClick: ()=>setCurrentPage('home'), __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white px-4", onClick: ()=>setCurrentPage('about'), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white px-4", onClick: ()=>setCurrentPage('blog'), __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Blog"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white px-4", onClick: ()=>setCurrentPage('contact'), __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, pages[currentPage] || /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 32 }, __self: this }, "Page not found")), /*#__PURE__*/ React.createElement("footer", { className: "w-full py-4 bg-[#242424] text-center text-sm", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "px-4 text-white", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Facebook"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "px-4 text-white", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Twitter"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "px-4 text-white", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Instagram")), /*#__PURE__*/ React.createElement("form", { className: "space-x-2", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "newsletter_email", placeholder: "Subscribe to our newsletter", className: "px-4 py-2 rounded text-black", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#61DAFB] hover:bg-[#4BA8D9] text-white font-bold py-2 px-4 rounded transition ease-in duration-200", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Subscribe"))))); }