function MainComponent() { const [messages, setMessages] = React.useState([]); const [currentMessage, setCurrentMessage] = React.useState(''); const [selectedConversationIndex, setSelectedConversationIndex] = React.useState(0); const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); const conversations = [ { name: "EchoBot 1", image: "path/to/echobot1.png", lastMessage: "Hello, how are you?" }, { name: "EchoBot 2", image: "path/to/echobot2.png", lastMessage: "Got your last message!" } ]; const handleSendMessage = ()=>{ if (currentMessage.trim()) { const newMessage = { text: currentMessage, conversationIndex: selectedConversationIndex }; setMessages([ ...messages, newMessage ]); setCurrentMessage(''); } }; const selectConversation = (index)=>{ setSelectedConversationIndex(index); setIsMobileMenuOpen(false); }; const toggleMobileMenu = ()=>{ setIsMobileMenuOpen(!isMobileMenuOpen); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gradient-to-br from-[#FF0000] to-[#FFC0CB] font-lato overflow-hidden", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: `transform ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"} md:translate-x-0 absolute md:relative w-64 md:w-[25%] h-screen p-5 bg-[#FFFFFF] bg-opacity-70 backdrop-filter backdrop-blur-lg text-[#121212] overflow-auto transition-transform duration-300 ease-in-out z-10`, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMobileMenu, className: "block md:hidden p-2 rounded-full mb-5 bg-[#FF0000] text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", name: "search", className: "w-full p-2 border border-[#CCCCCC] rounded-md", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, conversations.map((conversation, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `py-2 my-2 border-b border-[#CCCCCC] cursor-pointer ${selectedConversationIndex === index ? "bg-[#FF0000] text-white" : "bg-white text-[#121212]"} shadow-xl rounded-lg`, onClick: ()=>selectConversation(index), __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: conversation.image, alt: `${conversation.name}`, className: "w-10 h-10 rounded-full mr-3", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#121212] font-roboto font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }, conversation.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#CCCCCC]", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, conversation.lastMessage))))))), /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMobileMenu, className: "absolute top-5 right-5 md:hidden p-2 rounded-full bg-[#FF0000] text-white z-20", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "w-full md:w-[75%] flex flex-col h-screen ml-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-5 bg-[#FFFFFF] bg-opacity-70 backdrop-filter backdrop-blur-lg shadow-xl", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: conversations[selectedConversationIndex].image, alt: `Profile of ${conversations[selectedConversationIndex].name}`, className: "w-10 h-10 rounded-full mr-3", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, conversations[selectedConversationIndex].name)), /*#__PURE__*/ React.createElement("span", { className: "font-lato text-sm", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Online a few seconds ago")), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto p-5 flex-grow text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, messages.filter((msg)=>msg.conversationIndex === selectedConversationIndex).map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 flex flex-col items-start", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, msg.text && /*#__PURE__*/ React.createElement("p", { className: "bg-white text-[#121212] p-3 rounded-2xl font-lato shadow-xl", __source: { fileName: "", lineNumber: 69, columnNumber: 34 }, __self: this }, msg.text)))), /*#__PURE__*/ React.createElement("div", { className: "p-5 bg-[#FFFFFF] bg-opacity-70 backdrop-filter backdrop-blur-lg flex items-center rounded-2xl mx-5 mb-5 shadow-xl", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: currentMessage, onChange: (e)=>setCurrentMessage(e.target.value), className: "border p-2 rounded-2xl w-full mr-2 font-lato", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "p-2 rounded-2xl bg-[#FF0000] text-white font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }))))))); }