function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, user: "User1", content: "This is my first tweet!", likes: 5, reposts: 1 }, { id: 2, user: "User2", content: "React and Tailwind make UI design smooth :)", likes: 8, reposts: 2 }, { id: 3, user: "User3", content: "Just attended an awesome React conference!", likes: 15, reposts: 5 } ]); const [isFetching, setIsFetching] = React.useState(false); const likeTweet = (id)=>{ setTweets(tweets.map((tweet)=>tweet.id === id ? { ...tweet, likes: tweet.likes + 1 } : tweet)); }; const repostTweet = (id)=>{ setTweets(tweets.map((tweet)=>tweet.id === id ? { ...tweet, reposts: tweet.reposts + 1 } : tweet)); }; const fetchMoreTweets = ()=>{ setIsFetching(true); setTimeout(()=>{ const moreTweets = tweets.map((tweet)=>({ ...tweet, id: tweet.id + tweets.length })); setTweets(tweets.concat(moreTweets)); setIsFetching(false); }, 2000); }; React.useEffect(()=>{ const handleScroll = ()=>{ if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || isFetching) return; fetchMoreTweets(); }; window.addEventListener('scroll', handleScroll); return ()=>window.removeEventListener('scroll', handleScroll); }, [ tweets, isFetching ]); return /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto my-8", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-bold text-2xl", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Top Page"), /*#__PURE__*/ React.createElement("div", { className: "w-[50px] h-[50px] bg-blue-400 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/user/icon.png", alt: "User profile icon example", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center font-bold text-2xl mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Timeline"), tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "border-b border-gray-200 py-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 px-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50px] h-[50px] rounded-full bg-blue-400", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, tweet.user), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, tweet.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-1", onClick: ()=>likeTweet(tweet.id), __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-red-500", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, tweet.likes)), /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-1", onClick: ()=>repostTweet(tweet.id), __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-retweet text-green-500", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, tweet.reposts))))))), isFetching && /*#__PURE__*/ React.createElement("p", { className: "text-center my-8", __source: { fileName: "", lineNumber: 68, columnNumber: 22 }, __self: this }, "Loading more tweets...")); }