function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, username: "user1", handle: "@user1", content: "This is tweet number 1", avatar: "./avatar0.png" }, { id: 2, username: "user2", handle: "@user2", content: "This is tweet number 2", avatar: "./avatar1.png" }, { id: 3, username: "user3", handle: "@user3", content: "This is tweet number 3", avatar: "./avatar2.png" }, { id: 4, username: "user4", handle: "@user4", content: "This is tweet number 4", avatar: "./avatar3.png" }, { id: 5, username: "user5", handle: "@user5", content: "This is tweet number 5", avatar: "./avatar4.png" } ]); const [tweetContent, setTweetContent] = React.useState(''); const handleTweetChange = (e)=>{ setTweetContent(e.target.value); }; const handleTweetPost = ()=>{ if (!tweetContent.trim()) return; const newTweet = { id: tweets.length + 1, username: `user${tweets.length + 1}`, handle: `@user${tweets.length + 1}`, content: tweetContent, avatar: `./avatar${tweets.length % 5}.png` }; setTweets([ newTweet, ...tweets ]); setTweetContent(''); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto my-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#1DA1F2]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Twitter"), /*#__PURE__*/ React.createElement("button", { onClick: handleTweetPost, className: "text-white bg-[#1DA1F2] py-2 px-4 rounded-full hover:bg-[#1991DA] transition-colors duration-300", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Tweet")), /*#__PURE__*/ React.createElement("div", { className: "border-b-2 border-[#E1E8ED] mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: tweetContent, onChange: handleTweetChange, className: "w-full p-4 text-lg font-normal border-none outline-none text-[#14171A]", type: "text", placeholder: "What's happening?", name: "tweet", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "flex p-4 border-b-2 border-[#E1E8ED] last:border-0", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tweet.avatar, alt: `User avatar ${tweet.username}`, className: "w-[48px] h-[48px] rounded-full mr-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, tweet.username), /*#__PURE__*/ React.createElement("p", { className: "text-[#657786]", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, tweet.handle), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, tweet.content)))))); }