function MainComponent() { const websites = [ { id: 1, name: "Website A" }, { id: 2, name: "Website B" }, { id: 3, name: "Website C" } ]; const [formData, setFormData] = React.useState({ email: '', username: '', password: '', selectedWebsites: [] }); const [submissionStatus, setSubmissionStatus] = React.useState({ isSubmitting: false, success: false, error: '' }); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; if (type === "checkbox") { setFormData((prevFormData)=>({ ...prevFormData, selectedWebsites: checked ? [ ...prevFormData.selectedWebsites, parseInt(value) ] : prevFormData.selectedWebsites.filter((id)=>id !== parseInt(value)) })); } else { setFormData({ ...formData, [name]: value }); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setSubmissionStatus({ isSubmitting: true, success: false, error: '' }); console.log("Form Data submitted:", formData); setTimeout(()=>{ setSubmissionStatus({ isSubmitting: false, success: true, error: '' }); setFormData({ email: '', username: '', password: '', selectedWebsites: [] }); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Auto-Sign Up for Multiple Websites"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-sm space-y-3", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "mb-2 font-semibold", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 p-2 rounded", type: "email", placeholder: "Your email address", "aria-label": "Email address", name: "email", value: formData.email, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "mb-2 font-semibold", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 p-2 rounded", type: "text", placeholder: "Your username", "aria-label": "Username", name: "username", value: formData.username, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "mb-2 font-semibold", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 p-2 rounded", type: "password", placeholder: "Your password", "aria-label": "Password", name: "password", value: formData.password, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("fieldset", { className: "flex flex-col", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Select Websites"), websites.map((website)=>/*#__PURE__*/ React.createElement("div", { key: website.id, __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: `website-${website.id}`, name: "selectedWebsites", value: website.id, checked: formData.selectedWebsites.includes(website.id), onChange: handleChange, __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `website-${website.id}`, className: "ml-2", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, website.name)))), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:bg-gray-400", type: "submit", disabled: submissionStatus.isSubmitting, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, submissionStatus.isSubmitting ? "Signing Up..." : "Sign Up"), submissionStatus.success && /*#__PURE__*/ React.createElement("p", { className: "text-green-500", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Successfully signed up for selected websites!"), submissionStatus.error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, submissionStatus.error))); }