function MainComponent() { const [tweets, setTweets] = React.useState([]); const [tweetText, setTweetText] = React.useState(""); const handleTweetChange = (e)=>setTweetText(e.target.value); const handleTweetSubmit = ()=>{ if (tweetText.trim()) { setTweets([ { id: tweets.length + 1, content: tweetText }, ...tweets ]); setTweetText(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center min-h-screen bg-[#f5f8fa] font-sans", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#1da1f2] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl font-bold", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Twitter"), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#1da1f2] py-2 px-4 rounded-full font-bold", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Tweet")), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-[600px] mt-6", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "tweet", className: "w-full h-[100px] p-2 border border-gray-300 rounded-lg", placeholder: "What's happening?", value: tweetText, onChange: handleTweetChange, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleTweetSubmit, className: "bg-[#1da1f2] text-white py-2 px-4 rounded-full font-bold", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Tweet"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "bg-white p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/profile-picture.jpg", alt: "Profile picture of the user", className: "w-[50px] h-[50px] rounded-full mr-4", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, "User Name"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "@username"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, tweet.content)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-gray-500 mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comment", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-retweet", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-share", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }))))))); }