function MicroblogAppbar({ serviceName }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A202C] px-5 py-3 flex justify-between items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-bold font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, serviceName)); } function MicroblogAppbarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MicroblogAppbar, { serviceName: "microblog", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [formData, setFormData] = React.useState({ title: '', content: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prevData)=>({ ...prevData, [name]: value })); }; const handleSubmit = async (e)=>{ e.preventDefault(); const { title, content } = formData; const createdAt = new Date().toISOString(); await fetch('/api/db/blogs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: "INSERT INTO `blog_posts` (`title`, `content`, `created_at`) VALUES (?, ?, ?)", values: [ title, content, createdAt ] }) }); setFormData({ title: '', content: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col bg-[#f0f2f5] font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MicroblogAppbar, { serviceName: "microblog", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl px-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#333] mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "ブログ投稿フォーム"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white shadow-md rounded-lg overflow-hidden p-8", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: "block text-[#333] text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "タイトル"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "title", name: "title", value: formData.title, onChange: handleChange, className: "w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#555]", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "content", className: "block text-[#333] text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "内容"), /*#__PURE__*/ React.createElement("textarea", { id: "content", name: "content", value: formData.content, onChange: handleChange, rows: "6", className: "w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#555]", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 rounded-lg bg-[#007bff] text-white hover:bg-[#0056b3] transition-colors duration-200", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "投稿"))))); }