function MainComponent({ initialPosts = [] }) { const [posts, setPosts] = React.useState(initialPosts); const [name, setName] = React.useState(''); const [message, setMessage] = React.useState(''); const addPost = (e)=>{ e.preventDefault(); if (name.trim() === '' || message.trim() === '') return; const now = new Date(); const dateString = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${now.getHours()}:${now.getMinutes()}`; const newPost = { name, message, date: dateString }; setPosts([ ...posts, newPost ]); setName(''); setMessage(''); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "2ちゃんねる風掲示板"), /*#__PURE__*/ React.createElement("div", { id: "posts", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, posts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "post my-2 p-2 border border-gray-300 rounded bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "post-header text-xs text-[#666666]", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, post.name, " - ", post.date), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, post.message)))), /*#__PURE__*/ React.createElement("form", { id: "postForm", onSubmit: addPost, className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "nameInput", className: "block mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "名前:"), /*#__PURE__*/ React.createElement("input", { id: "nameInput", name: "name", type: "text", className: "w-full p-2 border border-gray-300 rounded mb-4", value: name, onChange: (e)=>setName(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "messageInput", className: "block mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "メッセージ:"), /*#__PURE__*/ React.createElement("textarea", { id: "messageInput", name: "message", rows: "4", cols: "50", className: "w-full p-2 border border-gray-300 rounded mb-4", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#008CBA] text-white px-4 py-2 rounded cursor-pointer", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "投稿"))); } function StoryComponent() { const initialPosts = [ { name: 'Yamada', message: '初めての投稿です！', date: '2023/10/1 14:35' }, { name: 'Suzuki', message: 'こんにちは！', date: '2023/10/2 16:20' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { initialPosts: initialPosts, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this })); }