function MainComponent() { const [messages, setMessages] = React.useState([ { user: "user_one", message: "Hey, how are you?", profileImage: "/profile1.jpg" }, { user: "user_two", message: "Let's meet tomorrow!", profileImage: "/profile2.jpg" } ]); const inputRef = React.useRef(null); const sendMessage = (event)=>{ event.preventDefault(); const newMessage = inputRef.current.value; if (newMessage) { setMessages([ ...messages, { user: "you", message: newMessage, profileImage: "/your-profile.jpg" } ]); inputRef.current.value = ""; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#FAFAFA] border-b border-[#DBDBDB] flex items-center justify-between", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto font-bold text-xl text-[#262626]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Direct"), /*#__PURE__*/ React.createElement("span", { className: "text-[#262626] text-xl cursor-pointer hover:text-[#000000]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-edit", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center p-2 hover:bg-[#F0F0F0] cursor-pointer", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full overflow-hidden mr-4", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.profileImage, alt: `Profile Image of ${message.user}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm font-semibold text-[#262626]", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, message.user), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-xs text-[#8E8E8E]", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, message.message)))))), /*#__PURE__*/ React.createElement("form", { className: "p-4 bg-[#FAFAFA] border-t border-[#DBDBDB]", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { ref: inputRef, type: "text", name: "message", placeholder: "Message...", className: "w-full p-2 border border-[#DBDBDB] rounded-lg text-sm font-roboto placeholder-[#8E8E8E]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }))); }