function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, user: 'User 1', handle: '@user1', content: 'The content of tweet from user 1.', profilePic: '/path/to/profile1.jpg' }, { id: 2, user: 'User 2', handle: '@user2', content: 'The content of tweet from user 2.', profilePic: '/path/to/profile2.jpg' } ]); const [newTweet, setNewTweet] = React.useState(''); const handleTweetChange = (e)=>setNewTweet(e.target.value); const handleTweetSubmit = ()=>{ if (newTweet) { setTweets([ ...tweets, { id: tweets.length + 1, user: 'User 3', handle: '@user3', content: newTweet, profilePic: '/path/to/profile3.jpg' } ]); setNewTweet(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#15202B] min-h-screen text-[#E1E8ED] font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mt-6", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-[#1DA1F2] text-white", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-twitter text-2xl", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-home text-xl", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#38444D]", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 bg-transparent border-none resize-none text-lg", placeholder: "What's happening?", name: "tweet", value: newTweet, onChange: handleTweetChange, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-image text-xl text-[#1DA1F2]", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-smile text-xl text-[#1DA1F2]", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-bar-chart text-xl text-[#1DA1F2]", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleTweetSubmit, className: "bg-[#1DA1F2] text-white px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Tweet"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col divide-y divide-[#38444D]", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "flex p-4 space-x-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tweet.profilePic, alt: `Profile picture of ${tweet.user}`, className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, tweet.user, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#657786]", __source: { fileName: "", lineNumber: 52, columnNumber: 55 }, __self: this }, tweet.handle)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, tweet.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2 text-[#657786]", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comment", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-retweet", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-share", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this })))))))); }