function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const { signInWithGoogle, signInWithTwitter, signInWithFacebook } = useAuth(); const handleGoogleSignIn = async ()=>{ setLoading(true); setError(null); try { await signInWithGoogle({ callbackUrl: "/profile", redirect: true }); } catch (err) { setError("Er ging iets mis bij het inloggen met Google. Probeer het opnieuw."); setLoading(false); } }; const handleTwitterSignIn = async ()=>{ setLoading(true); setError(null); try { await signInWithTwitter({ callbackUrl: "/profile", redirect: true }); } catch (err) { setError("Er ging iets mis bij het inloggen met Twitter. Probeer het opnieuw."); setLoading(false); } }; const handleFacebookSignIn = async ()=>{ setLoading(true); setError(null); try { await signInWithFacebook({ callbackUrl: "/profile", redirect: true }); } catch (err) { setError("Er ging iets mis bij het inloggen met Facebook. Probeer het opnieuw."); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md rounded-2xl bg-white p-8 shadow-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-center text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Inloggen"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-50 p-3 text-sm text-red-500", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: handleGoogleSignIn, disabled: loading, className: "flex w-full items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-3 text-base font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#357AFF] focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://www.google.com/favicon.ico", alt: "Google logo", className: "h-5 w-5", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), loading ? "Laden..." : "Doorgaan met Google"), /*#__PURE__*/ React.createElement("button", { onClick: handleTwitterSignIn, disabled: loading, className: "flex w-full items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-3 text-base font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#357AFF] focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "#1DA1F2", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this })), loading ? "Laden..." : "Doorgaan met Twitter"), /*#__PURE__*/ React.createElement("button", { onClick: handleFacebookSignIn, disabled: loading, className: "flex w-full items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-3 text-base font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#357AFF] focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "#1877F2", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this })), loading ? "Laden..." : "Doorgaan met Facebook"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Nog geen account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "text-[#357AFF] hover:text-[#2E69DE]", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Maak een account aan"))))); }