function MainComponent() { const [message, setMessage] = React.useState(''); const [messages, setMessages] = React.useState([ { text: ':wave: Hey there!', id: 1 }, { text: ':grinning: How are you?', id: 2 } ]); const handleSendMessage = ()=>{ if (message !== '') { setMessages([ ...messages, { text: message, id: messages.length + 1 } ]); setMessage(''); } }; const handleKeyPress = (event)=>{ if (event.key === 'Enter') { handleSendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#36393f] text-white", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-20 bg-[#202225] items-center py-3 space-y-4", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag text-gray-500 text-2xl", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag text-gray-500 text-2xl", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag text-gray-500 text-2xl", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag text-gray-500 text-2xl", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-gray-500 text-2xl", __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-60 bg-[#2f3136] p-3", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag text-gray-400", __source: { fileName: "", lineNumber: 32, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 33, columnNumber: 21 }, __self: this }, "general")), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex flex-col space-y-2 overflow-y-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle text-green-500", __source: { fileName: "", lineNumber: 37, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 38, columnNumber: 25 }, __self: this }, "user_one")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 40, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle text-green-500", __source: { fileName: "", lineNumber: 41, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 42, columnNumber: 25 }, __self: this }, "user_two")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-grow bg-[#36393f] p-3", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, "General"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-gray-500", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow mt-4 bg-[#40444b] rounded p-3 space-y-2 overflow-y-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", key: message.id, __source: { fileName: "", lineNumber: 53, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle text-green-500", __source: { fileName: "", lineNumber: 54, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 55, columnNumber: 29 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex mt-3", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Message #general", className: "flex-grow p-2 bg-[#40444b] rounded-l outline-none", value: message, onChange: (e)=>setMessage(e.target.value), onKeyPress: handleKeyPress, __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#5865F2] px-4 py-2 rounded-r", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-white", __source: { fileName: "", lineNumber: 66, columnNumber: 25 }, __self: this }))))); }