54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuthActions } from '@convex-dev/auth/react';
|
|
import { LogOut } from 'lucide-react';
|
|
|
|
import {
|
|
Button,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@gib/ui';
|
|
|
|
export const SignOutForm = () => {
|
|
const { signOut } = useAuthActions();
|
|
const router = useRouter();
|
|
const [isSigningOut, setIsSigningOut] = useState(false);
|
|
|
|
const handleSignOut = async () => {
|
|
setIsSigningOut(true);
|
|
try {
|
|
await signOut();
|
|
router.push('/');
|
|
} catch (error) {
|
|
console.error('Sign out error:', error);
|
|
setIsSigningOut(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<CardHeader>
|
|
<CardTitle>Sign Out</CardTitle>
|
|
<CardDescription>
|
|
End your current session and return to the home page
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
variant="destructive"
|
|
className="w-full"
|
|
onClick={handleSignOut}
|
|
disabled={isSigningOut}
|
|
>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
{isSigningOut ? 'Signing Out...' : 'Sign Out'}
|
|
</Button>
|
|
</CardContent>
|
|
</>
|
|
);
|
|
};
|