function SelectableButton({ buttonText, buttonType, handleClick }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-[#007bff] text-white p-2 rounded font-roboto", type: buttonType, onClick: handleClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function SelectableButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SelectableButton, { buttonText: "Click Me", buttonType: "button", handleClick: ()=>alert("Button Clicked!"), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [step, setStep] = React.useState(0); const [formData, setFormData] = React.useState({ age: "", school: "", department: "", industry: "", location: "" }); const steps = [ { label: "年齢: ", name: "age", options: [ "20-25", "26-30", "31-35", "36-40", "40+" ] }, { label: "学校: ", name: "school", options: [ "東京大学", "京都大学", "大阪大学", "名古屋大学", "その他" ] }, { label: "文系or理系: ", name: "department", options: [ "文系", "理系" ] }, { label: "希望業界: ", name: "industry", options: [ "IT", "金融", "教育", "医療", "製造" ] }, { label: "希望勤務地: ", name: "location", options: [ "東京", "大阪", "名古屋", "福岡", "札幌" ] } ]; const handleNextStep = (e)=>{ e.preventDefault(); setStep(step + 1); }; const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const currentStep = steps[step]; const isLastStep = step === steps.length - 1; const handleSubmit = ()=>{ const result = JSON.stringify(formData, null, 2); alert(`送信完了!\n${result}`); }; const buttonText = isLastStep ? "送信" : "次へ"; const buttonType = isLastStep ? "button" : "submit"; const handleClick = isLastStep ? handleSubmit : undefined; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-[#333] mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "マッチング診断サイト"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", onSubmit: handleNextStep, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mb-2", htmlFor: currentStep.name, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, currentStep.label), /*#__PURE__*/ React.createElement("select", { className: "p-2 mb-4 border border-gray-300 rounded", id: currentStep.name, name: currentStep.name, onChange: handleChange, value: formData[currentStep.name], __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "選択してください"), currentStep.options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, option))), /*#__PURE__*/ React.createElement(SelectableButton, { buttonText: buttonText, buttonType: buttonType, handleClick: handleClick, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this })))); }