function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, user: "User 1", username: "@user1", profileImage: "profile1.jpg", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus.", time: "2h ago" }, { id: 2, user: "User 2", username: "@user2", profileImage: "profile2.jpg", content: "Vivamus non arcu tincidunt, volutpat sapien vel, ullamcorper eros.", time: "3h ago" }, { id: 3, user: "User 3", username: "@user3", profileImage: "profile3.jpg", content: "Curabitur at leo porttitor, dictum sem vel, vehicula dolor.", time: "5h ago" } ]); const [postContent, setPostContent] = React.useState(""); const handlePostContentChange = (e)=>{ setPostContent(e.target.value); }; const handlePostSubmit = ()=>{ if (postContent) { const newPost = { id: posts.length + 1, user: "New User", username: "@newuser", profileImage: "profileNew.jpg", content: postContent, time: "Just now" }; setPosts([ newPost, ...posts ]); setPostContent(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "What's happening?", className: "w-full p-2 border rounded-lg", name: "postContent", value: postContent, onChange: handlePostContentChange, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 text-white p-2 rounded-lg w-full", onClick: handlePostSubmit, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Tweet")), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "border-b pb-4 mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.profileImage, alt: `User profile ${post.user}`, className: "w-[48px] h-[48px] rounded-full mr-3", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, post.user), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, post.username))), /*#__PURE__*/ React.createElement("div", { className: "ml-[48px]", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-sm mt-2", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, post.time))))))); }