function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, username: "username", name: "User Name", content: "This is a tweet example.", userPic: "/path/to/user-pic.jpg" } ]); const [tweetContent, setTweetContent] = React.useState(""); const handleTweetChange = (e)=>{ setTweetContent(e.target.value); }; const handleTweetSubmit = ()=>{ const newTweet = { id: tweets.length + 1, username: "username", name: "User Name", content: tweetContent, userPic: "/path/to/user-pic.jpg" }; setTweets([ newTweet, ...tweets ]); setTweetContent(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-200", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1DA1F2] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Twitter"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4 text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Explore"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Messages")))), /*#__PURE__*/ React.createElement("main", { className: "flex justify-center p-4 space-x-8 flex-wrap", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-[300px] mb-4 md:mb-0", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/profile-pic.jpg", alt: "Profile picture", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "User Name"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "@username"))))), /*#__PURE__*/ React.createElement("section", { className: "w-full md:w-[600px]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "tweet", value: tweetContent, onChange: handleTweetChange, placeholder: "What's happening?", className: "w-full p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleTweetSubmit, className: "bg-[#1DA1F2] text-white px-4 py-2 rounded-full font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Tweet"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, tweets.map((tweet)=>{ const likeIcon = "fas fa-heart fa-lg"; return /*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tweet.userPic, alt: "User profile picture", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 77, columnNumber: 23 }, __self: this }, tweet.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 23 }, __self: this }, "@", tweet.username), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 23 }, __self: this }, tweet.content))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mt-2 text-gray-600", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment fa-lg", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-retweet fa-lg", __source: { fileName: "", lineNumber: 84, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: likeIcon, __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-share fa-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }))); }))), /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-[300px]", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Trends for you"), /*#__PURE__*/ React.createElement("ul", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "#Trending1"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "#Trending2"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "#Trending3"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "#Trending4")))))); }