function MainComponent() { const [tweets, setTweets] = React.useState([ { user: 'User123', content: 'Lorem ipsum dolor sit amet.', likes: 0, retweets: 0, replies: [] } ]); const [replyContent, setReplyContent] = React.useState(''); const handleLike = (index)=>{ const updatedTweets = [ ...tweets ]; updatedTweets[index].likes += 1; setTweets(updatedTweets); }; const handleRetweet = (index)=>{ const updatedTweets = [ ...tweets ]; updatedTweets[index].retweets += 1; setTweets(updatedTweets); }; const handleReply = (index, reply)=>{ const updatedTweets = [ ...tweets ]; updatedTweets[index].replies.push(reply); setTweets(updatedTweets); }; const submitReply = (index)=>{ handleReply(index, replyContent); setReplyContent(''); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#e5e7eb] min-h-screen", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto py-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, tweets.map((tweet, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-lg shadow-md font-sans", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-[#1DA1F2] text-white rounded-full flex items-center justify-center font-bold text-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "U"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#1DA1F2] font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, tweet.user))), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-800", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, tweet.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4 text-gray-500", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-1", onClick: ()=>handleLike(index), __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, tweet.likes)), /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-1", onClick: ()=>handleRetweet(index), __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-retweet", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, tweet.retweets)), /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-1", onClick: ()=>document.getElementById(`reply-input-${index}`).focus(), __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comment", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, tweet.replies.length))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: `reply-input-${index}`, className: "w-full px-2 py-1 border rounded", placeholder: "Reply...", value: replyContent, onChange: (e)=>setReplyContent(e.target.value), onKeyDown: (e)=>e.key === 'Enter' && submitReply(index), name: "reply", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, tweet.replies.map((reply, rIndex)=>/*#__PURE__*/ React.createElement("div", { key: rIndex, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[30px] h-[30px] bg-[#1DA1F2] text-white rounded-full flex items-center justify-center font-bold text-sm", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, "R"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-sm", __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, reply))))))))); }