function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, name: 'John Doe', time: 'Just now', message: 'Hello World! This is my first post 😊', avatar: 'profile1.jpg' }, { id: 2, name: 'Jane Smith', time: '10 minutes ago', message: 'Such a beautiful day! ☀️', avatar: 'profile2.jpg' } ]); const [postMessage, setPostMessage] = React.useState(''); const handleSubmit = (event)=>{ event.preventDefault(); if (!postMessage.trim()) return; const newPost = { id: posts.length + 1, name: 'New User', time: 'Just now', message: postMessage, avatar: 'newprofile.jpg' }; setPosts([ newPost, ...posts ]); setPostMessage(''); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col p-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "p-2 font-roboto border border-gray-300 rounded-md resize-none mb-4", name: "post", placeholder: "What's on your mind?", rows: "3", value: postMessage, onChange: (e)=>setPostMessage(e.target.value), __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "self-end bg-[#4267B2] hover:bg-[#365899] text-white font-roboto py-2 px-4 rounded-md", type: "submit", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "邮政"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3 mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[40px] h-[40px] rounded-full", src: post.avatar, alt: `${post.name}'s avatar`, __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, post.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs font-roboto text-gray-500", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, post.time))), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, post.message)))))); }