function MainComponent() { const [posts, setPosts] = React.useState([]); const [postText, setPostText] = React.useState(''); function handleInputChange(event) { setPostText(event.target.value); } function handlePostSubmit() { if (postText.trim() === "") return; const newPost = { id: posts.length, content: postText, timestamp: new Date().toLocaleString(), likes: 0 }; setPosts([ newPost, ...posts ]); setPostText(''); } const postInputArea = /*#__PURE__*/ React.createElement("input", { type: "text", name: "postText", value: postText, onChange: handleInputChange, placeholder: "What's on your mind?", className: "w-full p-4 text-lg rounded-3xl bg-[#f0f2f5] border-[#ccd0d5] placeholder-[#65676b]", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }); const addPostButton = /*#__PURE__*/ React.createElement("button", { onClick: handlePostSubmit, className: "ml-4 px-6 py-2 bg-[#1877f2] text-white rounded-md hover:bg-[#166fe5]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, "Post"); const postList = posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white rounded-lg shadow p-4 my-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#050505] mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#65676b]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, post.timestamp), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-thumbs-up text-[#1877f2]", "aria-hidden": "true", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1 text-sm text-[#65676b]", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, `${post.likes} likes`)))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1877f2] text-white p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Facebook")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, postInputArea, addPostButton)), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, postList))); }