83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Github, Chrome, MessageCircle } from 'lucide-react';
|
|
|
|
interface OAuthButtonsProps {
|
|
onGoogleClick?: () => void;
|
|
onGithubClick?: () => void;
|
|
onDiscordClick?: () => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function OAuthButtons({
|
|
onGoogleClick,
|
|
onGithubClick,
|
|
onDiscordClick,
|
|
disabled = false,
|
|
}: OAuthButtonsProps) {
|
|
const handleGoogle = () => {
|
|
if (onGoogleClick) {
|
|
onGoogleClick();
|
|
} else {
|
|
window.location.href = '/api/v1/auth/oauth/google';
|
|
}
|
|
};
|
|
|
|
const handleGithub = () => {
|
|
if (onGithubClick) {
|
|
onGithubClick();
|
|
} else {
|
|
window.location.href = '/api/v1/auth/oauth/github';
|
|
}
|
|
};
|
|
|
|
const handleDiscord = () => {
|
|
if (onDiscordClick) {
|
|
onDiscordClick();
|
|
} else {
|
|
window.location.href = '/api/v1/auth/oauth/discord';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-sm text-center text-muted-foreground mb-4">
|
|
Or continue with
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleGoogle}
|
|
disabled={disabled}
|
|
className="w-full"
|
|
>
|
|
<Chrome className="mr-2 h-4 w-4" />
|
|
Continue with Google
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleGithub}
|
|
disabled={disabled}
|
|
className="w-full"
|
|
>
|
|
<Github className="mr-2 h-4 w-4" />
|
|
Continue with GitHub
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleDiscord}
|
|
disabled={disabled}
|
|
className="w-full"
|
|
>
|
|
<MessageCircle className="mr-2 h-4 w-4" />
|
|
Continue with Discord
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|