function MainComponent() { const [step, setStep] = React.useState(1); const [userInput, setUserInput] = React.useState({ method: '', password: '', confirmPassword: '', username: '' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setUserInput({ ...userInput, [name]: value }); }; const submitForm = ()=>{ if (step === 3 && userInput.password === userInput.confirmPassword) { console.log(userInput); setStep(1); // Reset to initial step after submission } else { setStep(step + 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F4F8]", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#0F172A] mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "アカウント登録"), step === 1 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-roboto px-4 py-2 bg-[#0EA5E9] text-white rounded-lg", onClick: ()=>setUserInput({ ...userInput, method: 'Google' }), __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Google"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto px-4 py-2 bg-[#E11D48] text-white rounded-lg", onClick: ()=>setUserInput({ ...userInput, method: 'Instagram' }), __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Instagram"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto px-4 py-2 bg-[#6366F1] text-white rounded-lg", onClick: ()=>setUserInput({ ...userInput, method: 'X' }), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "X"), /*#__PURE__*/ React.createElement("input", { name: "method", className: "border p-2 rounded-lg w-full mb-4", placeholder: "メールアドレスまたは電話番号", value: userInput.method, onChange: handleInputChange, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "font-roboto mt-4 px-4 py-2 bg-[#10B981] text-white rounded-lg", onClick: submitForm, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "次へ")), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "password", className: "border p-2 rounded-lg w-full mb-4", type: "password", placeholder: "パスワード", value: userInput.password, onChange: handleInputChange, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "confirmPassword", className: "border p-2 rounded-lg w-full", type: "password", placeholder: "パスワード確認", value: userInput.confirmPassword, onChange: handleInputChange, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "font-roboto mt-4 px-4 py-2 bg-[#10B981] text-white rounded-lg", onClick: submitForm, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "次へ")), step === 3 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", className: "border p-2 rounded-lg w-full mb-4", placeholder: "ユーザー名", value: userInput.username, onChange: handleInputChange, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "font-roboto mt-4 px-4 py-2 bg-[#10B981] text-white rounded-lg", onClick: submitForm, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "登録"))); }