85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Icon } from '@iconify/react/dist/iconify.js';
|
|
import { useFacebookLogin } from '@/hooks/use-facebook-login';
|
|
import { FacebookLoginResponse } from '@/types/facebook-login';
|
|
|
|
interface FacebookLoginButtonProps {
|
|
appId: string;
|
|
onSuccess?: (response: FacebookLoginResponse) => void;
|
|
onError?: (error: any) => void;
|
|
permissions?: string[];
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const FacebookLoginButton: React.FC<FacebookLoginButtonProps> = ({
|
|
appId,
|
|
onSuccess,
|
|
onError,
|
|
permissions = ['public_profile', 'email'],
|
|
className = '',
|
|
children,
|
|
disabled = false,
|
|
}) => {
|
|
const { isLoaded, isLoggedIn, login, logout } = useFacebookLogin({
|
|
appId,
|
|
});
|
|
|
|
const handleLogin = async () => {
|
|
try {
|
|
const response = await login(permissions);
|
|
onSuccess?.(response);
|
|
} catch (error) {
|
|
onError?.(error);
|
|
}
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logout();
|
|
} catch (error) {
|
|
onError?.(error);
|
|
}
|
|
};
|
|
|
|
if (!isLoaded) {
|
|
return (
|
|
<Button
|
|
variant="default"
|
|
className={`w-full flex items-center justify-center gap-2 bg-[#1877F2] hover:bg-[#166fe0] ${className}`}
|
|
disabled
|
|
>
|
|
<Icon icon="logos:facebook" className="text-xl" />
|
|
Loading...
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (isLoggedIn) {
|
|
return (
|
|
<Button
|
|
variant="default"
|
|
className={`w-full flex items-center justify-center gap-2 bg-[#1877F2] hover:bg-[#166fe0] ${className}`}
|
|
onClick={handleLogout}
|
|
disabled={disabled}
|
|
>
|
|
<Icon icon="logos:facebook" className="text-xl" />
|
|
{children || 'Disconnect Facebook'}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="default"
|
|
className={`w-full flex items-center justify-center gap-2 bg-[#1877F2] hover:bg-[#166fe0] ${className}`}
|
|
onClick={handleLogin}
|
|
disabled={disabled}
|
|
>
|
|
<Icon icon="logos:facebook" className="text-xl" />
|
|
{children || 'Connect Facebook'}
|
|
</Button>
|
|
);
|
|
};
|