function MainComponent() { const [email, setEmail] = React.useState(''); const [result, setResult] = React.useState(null); const handleChange = (event)=>{ setEmail(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (email) { try { const response = await fetch('https://api.email-validator.net/api/verify', { method: 'POST', body: JSON.stringify({ EmailAddress: email }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setResult(data); } catch (error) { setResult({ error: 'Error validating email.' }); } } }; const renderResult = result && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 rounded shadow-lg bg-white", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, result['syntax-error'] === false ? result.valid ? `The email ${result.email} is valid.` : `The email ${result.email} is invalid.` : 'Invalid email syntax.'), result.error ? /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-red-500", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, result.error) : /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Provider: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 41, columnNumber: 25 }, __self: this }, result.provider)), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Domain: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 42, columnNumber: 23 }, __self: this }, result.domain), " (", result['domain-status'], ")"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Free email service: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 43, columnNumber: 35 }, __self: this }, result['is-freemail'] ? 'Yes' : 'No')), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Typo fixed: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 44, columnNumber: 27 }, __self: this }, result['typos-fixed'] ? 'Yes' : 'No')), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Domain error: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 29 }, __self: this }, result['domain-error'] ? 'Yes' : 'No')), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Disposable email: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 46, columnNumber: 33 }, __self: this }, result['is-disposable'] ? 'Yes' : 'No')), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Personal email: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 47, columnNumber: 31 }, __self: this }, result['is-personal'] ? 'Yes' : 'No')), result['mx-ip'] && /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 48, columnNumber: 31 }, __self: this }, "Mail server IP: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 48, columnNumber: 51 }, __self: this }, result['mx-ip'])))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f7f7f7] p-6", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mt-8 mb-4 px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-roboto mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "email", type: "email", placeholder: "Enter your email", name: "email", value: email, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#3498db] hover:bg-[#2980b9] text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Validate"))), renderResult)); }