function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, username: 'Username', handle: '@username', content: 'Post content goes here. It can include text, images, and videos.', avatar: 'path/to/profile.jpg' }, { id: 2, username: 'Username', handle: '@username', content: 'Another post content goes here. It can include text, images, and videos.', avatar: 'path/to/profile2.jpg' } ]); const [newPost, setNewPost] = React.useState(''); const handlePostChange = (e)=>{ setNewPost(e.target.value); }; const handlePostSubmit = ()=>{ setPosts([ ...posts, { id: posts.length + 1, username: 'CurrentUser', handle: '@currentuser', content: newPost, avatar: 'path/to/currentprofile.jpg' } ]); setNewPost(''); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans text-[#1d1d1d] bg-[#f0f2f5] min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-md p-4 flex justify-between", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-blue-500 text-2xl font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Logo"), /*#__PURE__*/ React.createElement("div", { className: "space-x-6 hidden md:flex", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Explore"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Messages"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-4 items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "More")), /*#__PURE__*/ React.createElement("div", { className: "flex md:hidden", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "☰")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden lg:flex lg:flex-[1] bg-white p-4 space-y-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Who to follow"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "User suggestions")), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Trending Topics"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Trending topics content")), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Recent Activities"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Recent activities content"))), /*#__PURE__*/ React.createElement("main", { className: "flex-[3] p-4 space-y-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4 shadow-md", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "post", className: "w-full p-2 border rounded-lg", placeholder: "What's happening?", value: newPost, onChange: handlePostChange, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, "📷"), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, "🎥")), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded-lg", onClick: handlePostSubmit, __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Post"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white border rounded-lg p-4", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.avatar, className: "w-[50px] h-[50px] rounded-full", alt: `Profile of ${post.username}`, __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 95, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 96, columnNumber: 23 }, __self: this }, post.username), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 97, columnNumber: 23 }, __self: this }, post.handle)), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mt-2 text-gray-500", __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 101, columnNumber: 23 }, __self: this }, "👍"), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 102, columnNumber: 23 }, __self: this }, "🔁"), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 103, columnNumber: 23 }, __self: this }, "💬")))))))))); }