43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { montserrat } from '@/app/fonts';
|
|
import { Separator } from '@/ui/components/shadcn/separator';
|
|
import { useClerk } from '@clerk/nextjs';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
|
|
export type UserProfileButtonProps = {
|
|
username: string;
|
|
};
|
|
|
|
export function UserManagmentPopover({ username }: UserProfileButtonProps) {
|
|
const queryClient = useQueryClient();
|
|
|
|
const { signOut } = useClerk();
|
|
|
|
const onSignOutUser = () => {
|
|
signOut({ redirectUrl: '/api/user/unload' }).then(() => {
|
|
queryClient.invalidateQueries({ queryKey: ['sessionData'] });
|
|
console.log(`Signing out user: ${username}`);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className='space-y-4'>
|
|
<p className='text-sm font-medium leading-none'>{username}</p>
|
|
<Separator />
|
|
<button
|
|
className='flex h-[24px] w-full cursor-pointer items-center justify-start'
|
|
onClick={onSignOutUser}
|
|
>
|
|
<p
|
|
className={`text-sm font-medium leading-none ${montserrat.className}`}
|
|
>
|
|
Sign out
|
|
</p>
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|