function MainComponent() { const [messages, setMessages] = React.useState([ { text: "Hello! How are you?", time: "10:00 AM", sender: "other" }, { text: "I'm good, thanks! How about you?", time: "10:01 AM", sender: "self" } ]); const [newMessage, setNewMessage] = React.useState(""); const sendMessage = ()=>{ if (newMessage.trim()) { setMessages([ ...messages, { text: newMessage, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), sender: "self" } ]); setNewMessage(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-blue-500 text-white font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Chatting App"), /*#__PURE__*/ React.createElement("div", { className: "font-xl", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, messages.map((message, index)=>{ const isSelf = message.sender === "self"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 ${isSelf ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isSelf ? "ml-auto bg-green-300" : "bg-blue-300"} max-w-[60%] p-2 rounded-md font-roboto`, __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, message.text)), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, message.time)); })), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-white flex items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow p-2 border rounded-md font-roboto", placeholder: "Type a message...", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), onKeyDown: (e)=>e.key === 'Enter' && sendMessage(), __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "p-2 ml-2 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })))); }