function MainComponent() { const [selectedChat, setSelectedChat] = useState(null); const [newMessage, setNewMessage] = useState(""); const [showChat, setShowChat] = useState(false); const conversations = [ { id: 1, username: "zuck", avatar: "https://i.ibb.co/gFShKr00/image.png", lastMessage: "please update the app name to trenchstagram that would be so bullish", unread: true, messages: [ { id: 1, sender: "me", content: "please update the app name to trenchstagram that would be so bullish", timestamp: "Just now" } ] }, { id: 2, username: "defi_wizard", avatar: "https://i.ibb.co/B2Wb9yFJ/image.png", lastMessage: "Ser, have you tried this new protocol?", unread: false, messages: [ { id: 1, sender: "defi_wizard", content: "Ser, have you tried this new protocol?", timestamp: "1:15 PM" }, { id: 2, sender: "me", content: "Sounds like a rug ser 🚩", timestamp: "1:20 PM" } ] }, { id: 3, username: "nft_degen", avatar: "https://i.ibb.co/R4tcSr0B/image.png", lastMessage: "gm ☀️", unread: true, messages: [ { id: 1, sender: "nft_degen", content: "gm ☀️", timestamp: "11:45 AM" } ] } ]; const handleSendMessage = (e)=>{ e.preventDefault(); if (!newMessage.trim()) return; setNewMessage(""); }; const selectedConversation = conversations.find((c)=>c.id === selectedChat); const handleChatSelect = (chatId)=>{ setSelectedChat(chatId); setShowChat(true); }; const handleBackToList = ()=>{ setShowChat(false); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen text-white", __source: { fileName: "", lineNumber: 75, 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: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-4 mb-6", __source: { fileName: "", lineNumber: 78, 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: 79, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1", __source: { fileName: "", lineNumber: 86, 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: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-[22px]", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-[22px]", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-compass text-[22px]", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 106, 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: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film text-[22px]", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Reels")), /*#__PURE__*/ React.createElement("a", { href: "/messages", className: "flex items-center gap-4 p-3 rounded-lg bg-[#121212]", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-paper-plane text-[22px]", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 120, 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: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-[22px]", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 127, 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: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-square-plus text-[22px]", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 134, 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: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/profile-pic.jpg", alt: "Profile", className: "w-[22px] h-[22px] rounded-full", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto pt-6", __source: { fileName: "", lineNumber: 149, 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: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-[22px]", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 155, 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: 161, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 flex items-center", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, showChat ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: handleBackToList, className: "mr-4", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-[22px]", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this })), selectedConversation && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedConversation.avatar, alt: selectedConversation.username, className: "w-8 h-8 rounded-full", __source: { fileName: "", lineNumber: 170, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-semibold", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, selectedConversation.username))) : /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/66935516-2018-4346-b506-d1402e4f8884/-/format/auto/", alt: "trenchstagram", className: "h-[29px]", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 md:ml-[245px] flex pt-[60px] md:pt-0 pb-[60px] md:pb-0", __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${showChat ? "hidden" : "block"} md:block w-full md:w-[350px] md:border-r md:border-[#262626]`, __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#262626]", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, "Messages")), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[calc(100vh-130px)] md:h-[calc(100vh-70px)]", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, conversations.map((conv)=>/*#__PURE__*/ React.createElement("div", { key: conv.id, onClick: ()=>handleChatSelect(conv.id), className: `flex items-center p-4 cursor-pointer hover:bg-[#121212] ${selectedChat === conv.id ? "bg-[#121212]" : ""}`, __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: conv.avatar, alt: conv.username, className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-1", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 214, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold", __source: { fileName: "", lineNumber: 215, columnNumber: 21 }, __self: this }, conv.username), conv.unread && /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-[#0095f6] rounded-full", __source: { fileName: "", lineNumber: 217, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[#737373] text-sm truncate", __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this }, conv.lastMessage)))))), /*#__PURE__*/ React.createElement("div", { className: `${!showChat ? "hidden" : "flex"} md:flex flex-col flex-1`, __source: { fileName: "", lineNumber: 230, columnNumber: 9 }, __self: this }, selectedConversation ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex p-4 border-b border-[#262626] items-center", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedConversation.avatar, alt: selectedConversation.username, className: "w-8 h-8 rounded-full", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-semibold", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, selectedConversation.username)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, selectedConversation.messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex ${message.sender === "me" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 249, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-2xl px-4 py-2 ${message.sender === "me" ? "bg-[#0095f6]" : "bg-[#262626]"}`, __source: { fileName: "", lineNumber: 257, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 264, columnNumber: 25 }, __self: this }, message.content), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#737373] mt-1", __source: { fileName: "", lineNumber: 265, columnNumber: 25 }, __self: this }, message.timestamp)))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "p-4 border-t border-[#262626] flex gap-4", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Message...", className: "flex-1 bg-[#262626] rounded-full px-4 py-2 focus:outline-none", __source: { fileName: "", lineNumber: 278, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !newMessage.trim(), className: "text-[#0095f6] font-semibold disabled:opacity-50", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, "Send"))) : /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center text-[#737373]", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }, "Select a conversation to start messaging"))), /*#__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: 303, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center p-3", __source: { fileName: "", lineNumber: 304, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-center", __source: { fileName: "", lineNumber: 305, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-[22px]", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "text-center", __source: { fileName: "", lineNumber: 308, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-compass text-[22px]", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/reels", className: "text-center", __source: { fileName: "", lineNumber: 311, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film text-[22px]", __source: { fileName: "", lineNumber: 312, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-center", __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-[22px]", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "text-center", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/profile-pic.jpg", alt: "profile", className: "w-[22px] h-[22px] rounded-full inline-block", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }))))); }