function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, title: "1 ：風吹けば名無し：2023/10/10(火) 12:00:00 ID:ABCDEFGH1", content: "これは簡単なテキストの内容です" }, { id: 2, title: "2 ：風吹けば名無し：2023/10/11(水) 13:00:00 ID:ABCDEFGH2", content: "これは別のテキストの内容です" } ]); const [formData, setFormData] = React.useState({ content: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const getFormattedDate = ()=>{ const now = new Date(); const weekday = [ "日", "月", "火", "水", "木", "金", "土" ][now.getDay()]; const date = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}(${weekday})`; const time = now.toTimeString().split(' ')[0]; return `${date} ${time}`; }; const generateRandomId = ()=>{ return Math.random().toString(36).substr(2, 9).toUpperCase(); }; const handleSubmit = (e)=>{ e.preventDefault(); const order = posts.length + 1; const newTitle = `${order} ：風吹けば名無し：${getFormattedDate()} ID:${generateRandomId()}`; const newPost = { id: Date.now(), title: newTitle, ...formData }; setPosts([ newPost, ...posts ]); setFormData({ content: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "掲示板"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-4 mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "新しい投稿"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "content", value: formData.content, onChange: handleChange, placeholder: "内容", className: "w-full p-2 mb-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "投稿"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold font-crimson-text", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, post.content)))))); }