function JapaneseSurveyForm({ name, onChange }) { return /*#__PURE__*/ React.createElement("select", { name: name, onChange: onChange, className: "mt-1 block w-full rounded-full border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "女性"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "その他")); } function JapaneseSurveyFormStory() { const handleChange = (event)=>{ console.log(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseSurveyForm, { name: "gender", onChange: handleChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [step, setStep] = React.useState(1); const nextPage = ()=>{ setStep((prevStep)=>prevStep + 1); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F2F5] min-h-screen flex flex-col items-center justify-center gap-8", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "アンケート型ランディングページ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-full max-w-[500px]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 rounded-md text-white font-semibold shadow", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "次へ")), step === 2 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "block w-full mb-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-semibold rounded-md", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "block w-full mb-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-semibold rounded-md", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "block w-full mb-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-semibold rounded-md", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "block w-full py-2 bg-blue-500 hover:bg-blue-700 text-white font-semibold rounded-md", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "4")), step === 3 && /*#__PURE__*/ React.createElement("form", { onSubmit: nextPage, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement(JapaneseSurveyForm, { name: "gender", onChange: ()=>{}, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 rounded-md text-white font-semibold shadow", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "送信")))); }