function MainComponent() { const [posts, setPosts] = React.useState([]); const [username, setUsername] = React.useState(''); const [content, setContent] = React.useState(''); const handleSubmit = (event)=>{ event.preventDefault(); const newPost = { username, content, timestamp: new Date().toLocaleString() }; setPosts([ newPost, ...posts.slice(0, 9) ]); setUsername(''); setContent(''); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-5 max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-5 font-crimson-text", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "Soccer Bulletin Board ⚽️"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-5", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", htmlFor: "username", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { id: "username", name: "username", type: "text", className: "border p-2 w-full", value: username, onChange: (e)=>setUsername(e.target.value), __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", htmlFor: "content", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Post Content"), /*#__PURE__*/ React.createElement("textarea", { id: "content", name: "content", className: "border p-2 w-full", value: content, onChange: (e)=>setContent(e.target.value), __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 font-crimson-text", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Post")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, posts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b pb-2 mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold font-crimson-text", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, post.username), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-crimson-text", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, post.timestamp))))); }