arifal
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { signIn } from "next-auth/react";
|
|
import { useState } from "react";
|
|
|
|
export function GoogleSignInButton({
|
|
callbackUrl = "/",
|
|
label = "Lanjutkan dengan Google",
|
|
}: {
|
|
callbackUrl?: string;
|
|
label?: string;
|
|
}) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
disabled={loading}
|
|
onClick={() => {
|
|
setLoading(true);
|
|
signIn("google", { callbackUrl });
|
|
}}
|
|
className="flex w-full items-center justify-center gap-2 rounded-xl border border-neutral-200 bg-white py-2.5 text-sm font-semibold text-neutral-700 shadow-sm transition-colors hover:bg-neutral-50 disabled:opacity-50"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 18 18" aria-hidden>
|
|
<path
|
|
fill="#4285F4"
|
|
d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.13 4.13 0 0 1-1.79 2.71v2.26h2.9c1.7-1.57 2.69-3.88 2.69-6.61z"
|
|
/>
|
|
<path
|
|
fill="#34A853"
|
|
d="M9 18c2.43 0 4.47-.81 5.96-2.18l-2.9-2.26c-.8.54-1.83.86-3.06.86-2.35 0-4.34-1.59-5.05-3.72H.96v2.34A9 9 0 0 0 9 18z"
|
|
/>
|
|
<path
|
|
fill="#FBBC05"
|
|
d="M3.95 10.7A5.41 5.41 0 0 1 3.66 9c0-.59.1-1.16.29-1.7V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.99-2.34z"
|
|
/>
|
|
<path
|
|
fill="#EA4335"
|
|
d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.96l2.99 2.34C4.66 5.17 6.65 3.58 9 3.58z"
|
|
/>
|
|
</svg>
|
|
{loading ? "Menghubungkan..." : label}
|
|
</button>
|
|
);
|
|
}
|