function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [members, setMembers] = React.useState([ "Alice", "Bob", "Charlie" ]); const handleSendMessage = (event)=>{ event.preventDefault(); if (!inputValue.trim()) return; setMessages((prevMessages)=>[ ...prevMessages, { id: Date.now(), text: inputValue } ]); setInputValue(""); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#202225] flex flex-row-reverse", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] bg-[#2f3136] p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-white text-lg mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Members"), members.map((member)=>/*#__PURE__*/ React.createElement("div", { key: member, className: "font-roboto text-white p-2 border-b border-[#40444b]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, member))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col ml-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4 space-y-2 bg-[#36393f]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "break-words p-2 bg-[#40444b] rounded shadow", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "flex p-2", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 rounded p-2 text-black", name: "message", type: "text", value: inputValue, onChange: (e)=>setInputValue(e.target.value), __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-2 px-4 py-2 bg-blue-500 rounded text-white hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Send")))); }