function MainComponent() { const [posts, setPosts] = React.useState([ { title: 'タイトル１', content: 'これはサンプルの投稿内容です。ここに投稿の詳細が表示されます。', author: '匿名' }, { title: 'タイトル２', content: 'これはサンプルの投稿内容です。ここに投稿の詳細が表示されます。', author: '匿名' } ]); const [newPost, setNewPost] = React.useState({ title: '', content: '' }); const handleNewPostChange = (e)=>{ setNewPost({ ...newPost, [e.target.name]: e.target.value }); }; const handleNewPostSubmit = (e)=>{ e.preventDefault(); setPosts([ ...posts, { ...newPost, author: '匿名' } ]); setNewPost({ title: '', content: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "5ch掲示板"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleNewPostSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: newPost.title, onChange: handleNewPostChange, placeholder: "タイトル", className: "w-full p-2 mb-2 border rounded text-sm", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "content", value: newPost.content, onChange: handleNewPostChange, placeholder: "投稿内容", className: "w-full p-2 mb-2 border rounded text-sm", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded text-sm", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "投稿する")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, posts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-4 border rounded bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "投稿者: ", post.author), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, post.content))))); }