function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, username: "Username", handle: "@userhandle", time: "5m", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel gravida arcu." }, { id: 2, username: "Username", handle: "@userhandle", time: "10m", content: "Vestibulum at erat eu enim dapibus ultricies. Vivamus luctus elit in metus malesuada, nec fermentum orci bibendum." } ]); const handleTweet = (event)=>{ event.preventDefault(); const tweetContent = event.target.elements.tweet.value; const newTweet = { id: tweets.length + 1, username: "Username", handle: "@userhandle", time: "0m", content: tweetContent }; setTweets([ newTweet, ...tweets ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[250px] p-4 bg-[#15202b] text-white flex flex-col justify-between", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-3xl", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 40, columnNumber: 61 }, __self: this }), " Home"), /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag mr-2", __source: { fileName: "", lineNumber: 41, columnNumber: 61 }, __self: this }), " Explore"), /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell mr-2", __source: { fileName: "", lineNumber: 42, columnNumber: 61 }, __self: this }), " Notifications"), /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope mr-2", __source: { fileName: "", lineNumber: 43, columnNumber: 61 }, __self: this }), " Messages"), /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bookmark mr-2", __source: { fileName: "", lineNumber: 44, columnNumber: 61 }, __self: this }), " Bookmarks"), /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-list-alt mr-2", __source: { fileName: "", lineNumber: 45, columnNumber: 61 }, __self: this }), " Lists"), /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 61 }, __self: this }), " Profile"), /*#__PURE__*/ React.createElement("button", { className: "text-left font-bold text-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ellipsis-h mr-2", __source: { fileName: "", lineNumber: 47, columnNumber: 61 }, __self: this }), " More"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1d9bf0] text-white py-2 px-4 rounded-full mt-4 font-bold", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Tweet"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/profile.jpg", alt: "User profile", className: "rounded-full w-[40px] h-[40px]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8899a6]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "@userhandle")))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 border-r border-l border-[#2f3336]", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-[#2f3336] p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#2f3336] flex space-x-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/profile.jpg", alt: "User profile", className: "rounded-full w-[40px] h-[40px]", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("form", { onSubmit: handleTweet, className: "w-full", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "bg-transparent text-[#d9d9d9] placeholder-[#8899a6] w-full resize-none", rows: 3, placeholder: "What's happening?", name: "tweet", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1d9bf0] text-white py-2 px-4 rounded-full mt-2 font-bold", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Tweet"))), tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "p-4 border-b border-[#2f3336]", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/profile.jpg", alt: "User profile", className: "rounded-full w-[40px] h-[40px]", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, tweet.username), /*#__PURE__*/ React.createElement("p", { className: "text-[#8899a6]", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, tweet.handle, " · ", tweet.time)), /*#__PURE__*/ React.createElement("p", { className: "text-[#d9d9d9]", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, tweet.content), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-[#8899a6] text-sm mt-2 w-[300px]", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-comment", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-retweet", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-heart", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-share", __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }))))))), /*#__PURE__*/ React.createElement("aside", { className: "w-[350px] p-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#253341] rounded-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full bg-transparent text-[#d9d9d9] placeholder-[#8899a6] p-2 rounded-full", placeholder: "Search Twitter", name: "search", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "What's happening"), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#253341] rounded-lg flex flex-col space-y-4", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#8899a6] text-sm", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Trending in Your Area"), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Trend 1")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#8899a6] text-sm", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "Trending in Your Area"), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Trend 2")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#8899a6] text-sm", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Trending in Your Area"), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Trend 3")))))); }