function MainComponent() { const [searchQuery, setSearchQuery] = useState(""); const [exploreContent, setExploreContent] = useState([ { id: 1, image: "", likes: "15.2K", comments: 421, type: "image", caption: "When your shitcoin goes -99% 📉😭" }, { id: 2, image: "", likes: "8.7K", comments: 234, type: "image", caption: "Diamond hands be like 💎🙌" }, { id: 3, image: "", likes: "12.1K", comments: 567, type: "video", caption: "POV: Watching charts 24/7 📊" }, { id: 4, image: "", likes: "9.3K", comments: 189, type: "image", caption: "Buy high sell low 📈📉" }, { id: 5, image: "", likes: "20.5K", comments: 876, type: "image", caption: "NFT traders explaining their investments 🖼️" }, { id: 6, image: "", likes: "11.8K", comments: 445, type: "video", caption: "Gas fees on ETH be like ⛽️💸" }, { id: 7, image: "", likes: "17.9K", comments: 634, type: "image", caption: "When someone mentions LUNA 🌙💀" }, { id: 8, image: "", likes: "16.4K", comments: 654, type: "image", caption: "DCA is the way 📈" }, { id: 9, image: "", likes: "13.2K", comments: 432, type: "video", caption: "Wen lambo? 🚗" }, { id: 10, image: "", likes: "18.7K", comments: 765, type: "image", caption: "WAGMI 🚀" }, { id: 11, image: "", likes: "14.5K", comments: 543, type: "image", caption: "Not your keys, not your coins 🔑" }, { id: 12, image: "", likes: "10.9K", comments: 321, type: "image", caption: "Bitcoin maxis be like 🤡" }, { id: 13, image: "", likes: "22.3K", comments: 876, type: "image", caption: "Solana when network is down again 💤" }, { id: 14, image: "", likes: "19.8K", comments: 654, type: "video", caption: "APE holders explaining tokenomics 🦍" }, { id: 15, image: "", likes: "25.1K", comments: 987, type: "image", caption: "When Binance lists your coin 📈" } ]); useEffect(()=>{ const generateImages = async ()=>{ try { const updatedContent = await Promise.all(exploreContent.map(async (item)=>{ try { const prompt = `meme style, ${item.caption}, digital art, funny, cryptocurrency theme`; const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}&width=512&height=512`); if (!response.ok) { throw new Error("Failed to generate image"); } const data = await response.json(); return { ...item, image: data.data[0] }; } catch (error) { console.error(`Error generating image for item ${item.id}:`, error); return item; } })); setExploreContent(updatedContent); } catch (error) { console.error("Error generating images:", error); } }; generateImages(); }, []); // ... rest of the imports and state management code ... return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen text-white", __source: { fileName: "", lineNumber: 165, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden md:fixed md:left-0 md:h-screen md:w-[245px] md:border-r md:border-[#262626] md:py-2 md:px-3 md:flex md:flex-col", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-4 mb-6", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/66935516-2018-4346-b506-d1402e4f8884/-/format/auto/", alt: "trenchstagram", className: "h-[29px]", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-[22px]", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-[22px]", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "flex items-center gap-4 p-3 rounded-lg bg-[#121212]", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-compass text-[22px]", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("a", { href: "/reels", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film text-[22px]", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, "Reels")), /*#__PURE__*/ React.createElement("a", { href: "/messages", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-paper-plane text-[22px]", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, "Messages")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-[22px]", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-square-plus text-[22px]", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, "Create")), /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://i.ibb.co/V0HrQPY0/image.png", alt: "profile", className: "w-[22px] h-[22px] rounded-full", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto pt-6", __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 240, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-[22px]", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, "More")))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden fixed top-0 left-0 right-0 bg-black border-b border-[#262626] z-50", __source: { fileName: "", lineNumber: 251, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/66935516-2018-4346-b506-d1402e4f8884/-/format/auto/", alt: "trenchstagram", className: "h-[29px]", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 md:ml-[245px] pt-[60px] md:pt-0 pb-[60px] md:pb-0", __source: { fileName: "", lineNumber: 262, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[935px] mx-auto p-4", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 264, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-[#737373]", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search crypto memes...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "w-full bg-[#262626] rounded-lg pl-10 pr-4 py-2 focus:outline-none", __source: { fileName: "", lineNumber: 267, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-1", __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, exploreContent.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "relative aspect-square group", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, item.image ? /*#__PURE__*/ React.createElement("img", { src: item.image, alt: item.caption, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 281, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#262626] flex items-center justify-center", __source: { fileName: "", lineNumber: 287, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 288, columnNumber: 21 }, __self: this })), item.type === "video" && /*#__PURE__*/ React.createElement("i", { className: "fas fa-play absolute top-2 right-2 text-white text-xl", __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity", __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-6 text-white", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 296, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 297, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 298, columnNumber: 23 }, __self: this }, item.likes)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 300, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment", __source: { fileName: "", lineNumber: 301, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 302, columnNumber: 23 }, __self: this }, item.comments))))))))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden fixed bottom-0 left-0 right-0 bg-black border-t border-[#262626] z-50", __source: { fileName: "", lineNumber: 313, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center p-3", __source: { fileName: "", lineNumber: 314, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-center", __source: { fileName: "", lineNumber: 315, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-[22px]", __source: { fileName: "", lineNumber: 316, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "text-center", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-compass text-[22px]", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/reels", className: "text-center", __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film text-[22px]", __source: { fileName: "", lineNumber: 322, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-center", __source: { fileName: "", lineNumber: 324, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-[22px]", __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "text-center", __source: { fileName: "", lineNumber: 327, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://i.ibb.co/V0HrQPY0/image.png", alt: "profile", className: "w-[22px] h-[22px] rounded-full inline-block", __source: { fileName: "", lineNumber: 328, columnNumber: 13 }, __self: this }))))); }