function MainComponent() { const users = [ "Alice", "Bob", "Charlie", "Dana" ]; const [selectedUser, setSelectedUser] = React.useState(users[0]); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[250px] bg-gray-800 text-white p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, users.map((user, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-2 hover:bg-gray-700 cursor-pointer", onClick: ()=>setSelectedUser(user), __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, user)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white p-4 flex flex-col", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-3 rounded-md", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Hello, how are you today??")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-right text-gray-500", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Alice"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", className: "flex-1 p-2 border border-gray-300 rounded-l-md", placeholder: "Type a message", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded-r-md", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Send"))))); }