function MainComponent() { const [email, setEmail] = React.useState(''); const [loading, setLoading] = React.useState(false); const [emailValidationMessage, setEmailValidationMessage] = React.useState(''); const validateEmail = async ()=>{ setLoading(true); setEmailValidationMessage(''); try { const response = await fetch(`/integrations/email-check-2/v1/email/verify?email=${encodeURIComponent(email)}`, { method: 'GET' }); const data = await response.json(); if (data.status === "deliverable") { setEmailValidationMessage("Email is valid."); } else { setEmailValidationMessage(`Email is invalid: ${data.reason}.`); } } catch (error) { setEmailValidationMessage("Failed to validate email."); } finally{ setLoading(false); } }; const handleSubmit = async (event)=>{ event.preventDefault(); validateEmail(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gradient-to-br from-[#363537] to-[#1c1c1c] flex flex-col justify-center items-center p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-appear max-w-md w-full space-y-8 bg-[#222222] p-8 text-white rounded-3xl shadow-2xl shadow-[#121212]/50", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-4xl font-bold", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Welcome Back"), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "hidden", name: "remember", defaultValue: "true", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email-address", className: "block text-sm font-medium", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { id: "email-address", name: "email", type: "email", autoComplete: "email", required: true, className: "mt-2 appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#333333] border border-transparent placeholder-gray-500 text-white focus:outline-none focus:ring-4 focus:ring-[#FF2E63]/50 focus:border-transparent", placeholder: "Enter your email", value: email, onChange: (event)=>setEmail(event.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm text-[#FF2E63]", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, loading ? "Validating..." : emailValidationMessage)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-[#FF2E63] hover:bg-[#ff637d] focus:outline-none focus:ring-4 focus:ring-[#FF2E63]/50", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Validate Email")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` @keyframes appear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-appear { animation: appear 0.5s ease-out forwards; } `)); }