68 lines
2 KiB
TypeScript
68 lines
2 KiB
TypeScript
import { Link, useNavigate } from "react-router";
|
|
import { authClient } from "~/lib/auth-client";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
|
|
import { Button } from "~/components/ui/button";
|
|
import { UserAvatar } from "~/components/ui/UserAvatar";
|
|
import type { RawFlagConfig } from "~/lib/flag-types";
|
|
|
|
interface UserMenuProps {
|
|
userId: string;
|
|
name: string | null;
|
|
email: string;
|
|
customAvatarUrl?: string | null;
|
|
flagConfig?: RawFlagConfig | null;
|
|
avatarType?: string | null;
|
|
}
|
|
|
|
export function UserMenu({
|
|
userId,
|
|
name,
|
|
email,
|
|
customAvatarUrl,
|
|
flagConfig,
|
|
avatarType,
|
|
}: UserMenuProps) {
|
|
const navigate = useNavigate();
|
|
|
|
async function handleSignOut() {
|
|
await authClient.signOut();
|
|
navigate("/");
|
|
}
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" className="relative h-9 w-9 p-0 overflow-hidden">
|
|
<UserAvatar
|
|
userId={userId}
|
|
name={name}
|
|
email={email}
|
|
customAvatarUrl={customAvatarUrl}
|
|
flagConfig={flagConfig}
|
|
avatarType={avatarType}
|
|
/>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="end" className="w-48 p-1">
|
|
<div className="px-2 py-1.5 text-sm">
|
|
<p className="font-medium truncate">{name ?? email}</p>
|
|
<p className="text-muted-foreground truncate text-xs">{email}</p>
|
|
</div>
|
|
<div className="border-t border-border my-1" />
|
|
<Link
|
|
to="/user-profile"
|
|
className="flex w-full items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent transition-colors"
|
|
>
|
|
Profile
|
|
</Link>
|
|
<div className="border-t border-border my-1" />
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent transition-colors"
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|