function MainComponent() { const [formData, setFormData] = React.useState({ firstName: '', lastName: '', email: '', password: '', confirmPassword: '', phoneNumber: '', dateOfBirth: '', address: '', marketingConsent: false }); const [errors, setErrors] = React.useState({}); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; setFormData((prevData)=>({ ...prevData, [name]: type === 'checkbox' ? checked : value })); }; const validateForm = ()=>{ let newErrors = {}; if (!formData.firstName) newErrors.firstName = '名前を入力してください'; if (!formData.lastName) newErrors.lastName = '姓を入力してください'; if (!formData.email) newErrors.email = 'メールアドレスを入力してください'; else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = '有効なメールアドレスを入力してください'; if (!formData.password) newErrors.password = 'パスワードを入力してください'; else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(formData.password)) { newErrors.password = 'パスワードは8文字以上で、大文字、小文字、数字を含む必要があります'; } if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = 'パスワードが一致しません'; if (!formData.phoneNumber) newErrors.phoneNumber = '電話番号を入力してください'; if (!formData.dateOfBirth) newErrors.dateOfBirth = '生年月日を選択してください'; setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e)=>{ e.preventDefault(); if (validateForm()) { console.log('Form submitted:', formData); // Here you would typically send the data to your backend } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative py-3 sm:max-w-xl sm:mx-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-blue-300 to-blue-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "アカウント登録")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row sm:space-x-4", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "lastName", value: formData.lastName, onChange: handleChange, className: "peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", placeholder: "姓", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, "姓"), errors.lastName && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 71, columnNumber: 41 }, __self: this }, errors.lastName)), /*#__PURE__*/ React.createElement("div", { className: "relative mt-4 sm:mt-0", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "firstName", value: formData.firstName, onChange: handleChange, className: "peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", placeholder: "名", __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, "名"), errors.firstName && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 83, columnNumber: 42 }, __self: this }, errors.firstName))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, className: "peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", placeholder: "メールアドレス", __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, "メールアドレス"), errors.email && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 96, columnNumber: 36 }, __self: this }, errors.email)), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: formData.password, onChange: handleChange, className: "peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", placeholder: "パスワード", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, "パスワード"), errors.password && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 108, columnNumber: 39 }, __self: this }, errors.password)), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "confirmPassword", value: formData.confirmPassword, onChange: handleChange, className: "peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", placeholder: "パスワード（確認）", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, "パスワード（確認）"), errors.confirmPassword && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 120, columnNumber: 46 }, __self: this }, errors.confirmPassword)), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phoneNumber", value: formData.phoneNumber, onChange: handleChange, className: "peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", placeholder: "電話番号", __source: { fileName: "", lineNumber: 123, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, "電話番号"), errors.phoneNumber && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 132, columnNumber: 42 }, __self: this }, errors.phoneNumber)), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "dateOfBirth", value: formData.dateOfBirth, onChange: handleChange, className: "peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, "生年月日"), errors.dateOfBirth && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 143, columnNumber: 42 }, __self: this }, errors.dateOfBirth)), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "address", value: formData.address, onChange: handleChange, className: "peer placeholder-transparent h-20 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:border-blue-600", placeholder: "住所（任意）", __source: { fileName: "", lineNumber: 146, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, "住所（任意）")), /*#__PURE__*/ React.createElement("div", { className: "relative flex items-start", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center h-5", __source: { fileName: "", lineNumber: 156, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "marketingConsent", checked: formData.marketingConsent, onChange: handleChange, className: "focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded", __source: { fileName: "", lineNumber: 157, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-3 text-sm", __source: { fileName: "", lineNumber: 165, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "marketingConsent", className: "font-medium text-gray-700", __source: { fileName: "", lineNumber: 166, columnNumber: 21 }, __self: this }, "マーケティング情報を受け取る")))), /*#__PURE__*/ React.createElement("div", { className: "pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __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 focus:outline-none focus:shadow-outline w-full", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, "アカウントを作成"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-medium text-blue-600 hover:text-blue-500", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, "既にアカウントをお持ちですか？ログイン")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center text-xs", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-500 hover:text-gray-700 mr-2", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "利用規約"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "プライバシーポリシー")))))); }