function MainComponent() { const [messages, setMessages] = React.useState([]); const [newMessage, setNewMessage] = React.useState(''); const sendMessage = (e)=>{ e.preventDefault(); if (newMessage.trim() === '') return; const message = { id: Math.random().toString(36).substr(2, 9), text: newMessage, timestamp: new Date(), user: 'You' }; setMessages([ ...messages, message ]); setNewMessage(''); }; const sortedMessages = messages.sort((a, b)=>a.timestamp - b.timestamp); const groupedMessages = sortedMessages.reduce((groups, message)=>{ const date = message.timestamp.toLocaleDateString(); if (!groups[date]) { groups[date] = []; } groups[date].push(message); return groups; }, {}); const messageList = Object.entries(groupedMessages).map(([date, messages])=>/*#__PURE__*/ React.createElement(React.Fragment, { key: date, __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center my-2", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 text-xs font-semibold bg-gray-200 rounded-full font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, date)), messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "flex items-end justify-end", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "max-w-xs px-4 py-2 bg-blue-100 rounded-lg font-roboto text-sm", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("img", { src: "./your-profile.jpg", alt: "Your profile picture", className: "w-8 h-8 rounded-full ml-3", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }))))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between px-4 py-3 bg-[#4a76a8] text-white", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Chatify")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[300px] border-r border-gray-200 bg-white hidden md:block", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, messageList), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 px-4 py-3", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex items-center gap-2", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type a message...", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), className: "flex-1 px-4 py-2 border border-gray-300 rounded-full shadow-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-[#4a76a8] text-2xl", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "✈️")))))); }