82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { signOut, useSession } from "next-auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
import { LogOut, Settings, User } from "lucide-react";
|
|
|
|
export function UserMenu() {
|
|
const router = useRouter();
|
|
const { data: session } = useSession();
|
|
const user = session?.user;
|
|
|
|
if (!user) return null;
|
|
|
|
// Generate initials from name or username
|
|
const getInitials = (name: string) => {
|
|
return name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2);
|
|
};
|
|
|
|
const initials = user.name ? getInitials(user.name) : "U";
|
|
|
|
const handleLogout = async () => {
|
|
await signOut({ redirect: false });
|
|
router.push("/login");
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-10 w-10 rounded-full">
|
|
<Avatar className="h-10 w-10">
|
|
<AvatarFallback className="bg-primary/10 text-primary">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
<DropdownMenuLabel>
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{user.name}</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{user.email}
|
|
</p>
|
|
<p className="text-xs leading-none text-muted-foreground mt-1">
|
|
Role: {user.role}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => router.push("/profile")}>
|
|
<User className="mr-2 h-4 w-4" />
|
|
<span>Profile</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => router.push("/settings")}>
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
<span>Settings</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout} className="text-red-600 focus:text-red-600">
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>Log out</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|