function MainComponent({ title, ageRequired, heightRequired, genderOptions, categoryRequired, colorRequired, moodRequired, sceneRequired, buttonText, onSubmitForm }) { return /*#__PURE__*/ React.createElement("a", { href: "/image-generator-interface", target: "_self", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#f4f4f4]", __source: { fileName: "", lineNumber: 3, columnNumber: 57 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmitForm, className: "bg-white p-5 rounded-lg shadow-md w-[300px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-center text-[#333] mb-5", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, title), ageRequired && /*#__PURE__*/ React.createElement("div", { className: "mb-2.5", __source: { fileName: "", lineNumber: 6, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "age", className: "font-roboto text-[#666] block mb-1.5", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "年齢:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "age", name: "age", required: true, className: "w-full rounded p-2 border border-[#ddd]", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), heightRequired && /*#__PURE__*/ React.createElement("div", { className: "mb-2.5", __source: { fileName: "", lineNumber: 10, columnNumber: 28 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "font-roboto text-[#666] block mb-1.5", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "身長(cm):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", required: true, className: "w-full rounded p-2 border border-[#ddd]", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this })), genderOptions && /*#__PURE__*/ React.createElement("div", { className: "mb-2.5", __source: { fileName: "", lineNumber: 14, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "gender", className: "font-roboto text-[#666] block mb-1.5", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "性別:"), /*#__PURE__*/ React.createElement("select", { id: "gender", name: "gender", className: "w-full rounded p-2 border border-[#ddd]", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, genderOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, option.label)))), categoryRequired && /*#__PURE__*/ React.createElement("div", { className: "mb-2.5", __source: { fileName: "", lineNumber: 22, columnNumber: 30 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "category", className: "font-roboto text-[#666] block mb-1.5", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "カテゴリ:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "category", name: "category", required: true, className: "w-full rounded p-2 border border-[#ddd]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), colorRequired && /*#__PURE__*/ React.createElement("div", { className: "mb-2.5", __source: { fileName: "", lineNumber: 26, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "color", className: "font-roboto text-[#666] block mb-1.5", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "色:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "color", name: "color", required: true, className: "w-full rounded p-2 border border-[#ddd]", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), moodRequired && /*#__PURE__*/ React.createElement("div", { className: "mb-2.5", __source: { fileName: "", lineNumber: 30, columnNumber: 26 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mood", className: "font-roboto text-[#666] block mb-1.5", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "雰囲気:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "mood", name: "mood", required: true, className: "w-full rounded p-2 border border-[#ddd]", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), sceneRequired && /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 34, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "scene", className: "font-roboto text-[#666] block mb-1.5", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "利用シーン:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "scene", name: "scene", required: true, className: "w-full rounded p-2 border border-[#ddd]", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/image-generator-interface", target: "_self", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full rounded p-2.5 bg-[#5c67f2] text-white cursor-pointer transition-all duration-300 hover:bg-[#5058e4]", __source: { fileName: "", lineNumber: 38, columnNumber: 61 }, __self: this }, buttonText))))); } function StoryComponent() { const handleSubmit = (event)=>{ event.preventDefault(); console.log("デザイン生成中..."); }; const genderOptions = [ { value: "male", label: "男性" }, { value: "female", label: "女性" }, { value: "other", label: "その他" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "情報入力フォーム", ageRequired: true, heightRequired: true, genderOptions: genderOptions, categoryRequired: true, colorRequired: true, moodRequired: true, sceneRequired: true, buttonText: "画像生成", onSubmitForm: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); }