function MainComponent() { const [selectedChat, setSelectedChat] = useState(null); const [message, setMessage] = useState(""); const [chats] = useState([ { id: 1, user: { username: "dance_queen", avatar: "/profile1.jpg", isOnline: true }, lastMessage: "Love your latest video! 🔥", time: "2m ago", unread: 2 }, { id: 2, user: { username: "music_maker", avatar: "/profile2.jpg", isOnline: false }, lastMessage: "Can we collab on the next one?", time: "1h ago", unread: 0 }, { id: 3, user: { username: "viral_star", avatar: "/profile3.jpg", isOnline: true }, lastMessage: "Thanks for the follow!", time: "5h ago", unread: 1 } ]); const [messages] = useState([ { id: 1, type: "received", text: "Hey, I saw your dance video!", time: "10:30 AM" }, { id: 2, type: "sent", text: "Thank you! I'm glad you liked it 😊", time: "10:32 AM" }, { id: 3, type: "received", text: "Love your latest video! 🔥", time: "10:33 AM" } ]); const handleSend = ()=>{ if (message.trim()) { setMessage(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black text-white font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full flex", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${selectedChat ? "hidden md:block" : ""} w-full md:w-[360px] border-r border-gray-800`, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-800", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Messages")), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[calc(100vh-130px)]", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, chats.map((chat)=>/*#__PURE__*/ React.createElement("div", { key: chat.id, onClick: ()=>setSelectedChat(chat), className: "p-4 flex items-center border-b border-gray-800 hover:bg-[#1A1A1A] cursor-pointer", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: chat.user.avatar, alt: chat.user.username, className: "w-12 h-12 rounded-full object-cover", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }), chat.user.isOnline && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-black", __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-1", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 96, columnNumber: 21 }, __self: this }, "@", chat.user.username), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, chat.time)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 truncate", __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, chat.lastMessage), chat.unread > 0 && /*#__PURE__*/ React.createElement("span", { className: "bg-[#FF3366] text-white text-xs rounded-full w-5 h-5 flex items-center justify-center", __source: { fileName: "", lineNumber: 104, columnNumber: 23 }, __self: this }, chat.unread))))))), /*#__PURE__*/ React.createElement("div", { className: `${!selectedChat ? "hidden md:block" : ""} flex-1 flex flex-col`, __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, selectedChat ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-800 flex items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedChat(null), className: "md:hidden mr-4", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: selectedChat.user.avatar, alt: selectedChat.user.username, className: "w-8 h-8 rounded-full", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-3 font-semibold", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "@", selectedChat.user.username)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, messages.map((msg)=>/*#__PURE__*/ React.createElement("div", { key: msg.id, className: `flex mb-4 ${msg.type === "sent" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-2xl px-4 py-2 ${msg.type === "sent" ? "bg-[#FF3366] rounded-br-none" : "bg-[#2A2A2A] rounded-bl-none"}`, __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 150, columnNumber: 23 }, __self: this }, msg.text), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 151, columnNumber: 23 }, __self: this }, msg.time))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-800", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: message, onChange: (e)=>setMessage(e.target.value), placeholder: "Type a message...", className: "flex-1 bg-[#2A2A2A] rounded-full px-4 py-2 focus:outline-none", name: "message", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "ml-2 w-10 h-10 bg-[#FF3366] rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 171, columnNumber: 21 }, __self: this }))))) : /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center text-gray-400", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, "Select a chat to start messaging"))), /*#__PURE__*/ React.createElement(React.Fragment, null)); }