function MainComponent() { const [messages, setMessages] = React.useState([]); const [currentMessage, setCurrentMessage] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (!currentMessage.trim()) return; const newMessage = { user: "CurrentUser", time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), text: currentMessage }; setMessages([ ...messages, newMessage ]); setCurrentMessage(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen w-screen", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[300px] bg-[#3F0E40] text-white p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Channels"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "# general"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "# random"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "# help"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#4A154B] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "# general"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle fa-2x", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 overflow-y-auto", style: { height: 'calc(100% - 64px)' }, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { className: "mb-4", key: index, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm text-[#EDEDED] mb-1", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, message.user, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#616061]", __source: { fileName: "", lineNumber: 35, columnNumber: 87 }, __self: this }, message.time)), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-md text-white", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("form", { className: "w-full flex items-center bg-[#4A154B] p-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", placeholder: "Type a message here...", className: "flex-1 rounded p-2 mr-4 outline-none", value: currentMessage, onChange: (e)=>setCurrentMessage(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007A5A] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Send")))); }