function MainComponent({ title, description, questions, onTitleChange, onSubmit }) { const handleSubmit = async (e)=>{ e.preventDefault(); const formData = new FormData(e.target); let data = {}; formData.forEach((value, key)=>{ if (key === "評価") { data[key] = parseInt(value, 10); } else { data[key] = value; } }); const fetchResponse = await fetch('/api/db/notion', { method: 'POST', body: JSON.stringify({ query: `INSERT INTO \`artists\` (\`group_name\`, \`formation_date\`, \`dissolution\`, \`office\`, \`website\`, \`twitter\`, \`instagram\`, \`tiktok\`, \`members\`, \`rating\`, \`feedback\`) VALUES ('${data.group_name}', '${data.formation_date}', '${data.dissolution}', '${data.office}', '${data.website}', '${data.twitter}', '${data.instagram}', '${data.tiktok}', '${data.members}', ${data.rating}, '${data.feedback}') ON DUPLICATE KEY UPDATE \`formation_date\`=VALUES(\`formation_date\`), \`dissolution\`=VALUES(\`dissolution\`), \`office\`=VALUES(\`office\`), \`website\`=VALUES(\`website\`), \`twitter\`=VALUES(\`twitter\`), \`instagram\`=VALUES(\`instagram\`), \`tiktok\`=VALUES(\`tiktok\`), \`members\`=VALUES(\`members\`), \`rating\`=VALUES(\`rating\`), \`feedback\`=VALUES(\`feedback\`)` }) }); if (fetchResponse.ok) { onSubmit(data); // Trigger any additional actions on submit, for now, we just pass the data up. } e.target.reset(); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "md:flex", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:flex-grow", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-5 bg-blue-500 text-white text-center font-bold text-xl", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-xl mx-auto my-10 space-y-6", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "フォームのタイトル", value: title, onChange: onTitleChange, className: "text-3xl font-semibold mb-2 p-2 w-full border-b border-gray-300 focus:outline-none", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-light", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, description)), questions.map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, question.label), question.type === "text" && /*#__PURE__*/ React.createElement("input", { type: "text", name: question.name, className: "border border-gray-300 p-2 w-full", __source: { fileName: "", lineNumber: 39, columnNumber: 46 }, __self: this }), question.type === "textarea" && /*#__PURE__*/ React.createElement("textarea", { name: question.name, rows: "4", className: "border border-gray-300 p-2 w-full", __source: { fileName: "", lineNumber: 40, columnNumber: 50 }, __self: this }), question.type === "rating" && /*#__PURE__*/ React.createElement("select", { name: question.name, className: "border border-gray-300 p-2 w-full", __source: { fileName: "", lineNumber: 41, columnNumber: 48 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((rating)=>/*#__PURE__*/ React.createElement("option", { key: rating, value: rating, __source: { fileName: "", lineNumber: 41, columnNumber: 155 }, __self: this }, rating))), question.type === "url" && /*#__PURE__*/ React.createElement("input", { type: "url", name: question.name, className: "border border-gray-300 p-2 w-full", placeholder: "URLを入力してください", __source: { fileName: "", lineNumber: 42, columnNumber: 45 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "提出")), /*#__PURE__*/ React.createElement("footer", { className: "py-3 bg-blue-500 text-white text-center font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "フォームフッター")))); } function StoryComponent() { const [formProps, setFormProps] = React.useState({ title: "アーティストフィードバックフォーム", description: "お気に入りのアーティストについて教えてください！", questions: [ { name: "group_name", label: "グループ名", type: "text" }, { name: "formation_date", label: "結成・デビュー日", type: "text" }, { name: "dissolution", label: "解散", type: "text" }, { name: "office", label: "事務所", type: "text" }, { name: "website", label: "HP", type: "url" }, { name: "twitter", label: "Twitter", type: "url" }, { name: "instagram", label: "Instagram", type: "url" }, { name: "tiktok", label: "TikTok", type: "url" }, { name: "members", label: "メンバー", type: "textarea" }, { name: "rating", label: "評価", type: "rating" }, { name: "feedback", label: "口コミ", type: "textarea" } ] }); async function handleSubmit(data) { // No changes here, logic is moved to MainComponent's handleSubmit method } function handleTitleChange(event) { setFormProps({ ...formProps, title: event.target.value }); } return /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { ...formProps, onTitleChange: handleTitleChange, onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this })); }