function MainComponent() { const [messages, setMessages] = React.useState([]); const sidebarWidth = "w-[260px]"; const sendMessage = (event)=>{ event.preventDefault(); const message = event.target.elements.message.value.trim(); if (message) { setMessages([ ...messages, message ]); event.target.elements.message.value = ''; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#36393f]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${sidebarWidth} bg-[#202225] p-4 overflow-y-auto`, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-bold text-xl", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Chat Line"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#5865f2] text-white p-2 rounded", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-semibold text-sm", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Channels"), /*#__PURE__*/ React.createElement("button", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus-circle", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white flex items-center w-full mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-hashtag text-xs mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "general"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none h-[50px] bg-[#2f3136] flex items-center px-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "# general")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#36393f] p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#40444b] text-white rounded p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, message)))), /*#__PURE__*/ React.createElement("div", { className: "flex-none", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-[#40444b] p-2", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "w-full bg-transparent text-white p-2", placeholder: "Message #general", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }))))); }