function MainComponent() { const [selectedTab, setSelectedTab] = React.useState('threads'); const threads = [ { id: 1, user: 'Jane Doe', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...', guesses: 5, unread: true, reactions: [ '👍', '❤️' ] }, { id: 2, user: 'John Smith', text: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...', guesses: 2, unread: false, reactions: [ '😂', '👎' ] } ]; const truncateText = (text, length = 50)=>text.length > length ? text.substring(0, length) + '...' : text; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-md h-screen flex flex-col justify-between bg-blue-50", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-3", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, threads.map((thread)=>/*#__PURE__*/ React.createElement("div", { key: thread.id, className: "p-3 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-200 rounded-full", style: { backgroundImage: `url('/avatars/${thread.id}.png')`, backgroundSize: 'cover' }, __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 17, columnNumber: 19 }, __self: this }, thread.user), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#121212]", __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, truncateText(thread.text))), thread.unread && /*#__PURE__*/ React.createElement("span", { className: "flex-shrink-0 h-3 w-3 bg-red-500 rounded-full", __source: { fileName: "", lineNumber: 21, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-2", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xs text-gray-500", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, "Guesses: ", thread.guesses), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, thread.reactions.map((reaction, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "text-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 21 }, __self: this }, reaction)))))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white border-t border-gray-300 py-2", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "threads-tab", className: `font-roboto flex flex-col items-center ${selectedTab === 'threads' ? 'text-blue-500' : 'text-gray-500'}`, onClick: ()=>setSelectedTab('threads'), __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: selectedTab === 'threads' ? 'fa fa-inbox text-xl' : 'fa fa-inbox text-xl', __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Threads")), /*#__PURE__*/ React.createElement("button", { name: "another-tab", className: `font-roboto flex flex-col items-center ${selectedTab === 'another' ? 'text-blue-500' : 'text-gray-500'}`, onClick: ()=>setSelectedTab('another'), __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: selectedTab === 'another' ? 'fa fa-user-friends text-xl' : 'fa fa-user-friends text-xl', __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Contacts"))))); }