89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
// File: components/layout/user-nav.tsx
|
|
"use client";
|
|
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { signOut, useSession } from "next-auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export function UserNav() {
|
|
const { data: session } = useSession();
|
|
const router = useRouter();
|
|
|
|
// Helper function to get initials from name
|
|
const getInitials = (name: string) => {
|
|
return name
|
|
?.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.substring(0, 2) || "US";
|
|
};
|
|
|
|
const userName = session?.user?.name || "User";
|
|
const userEmail = session?.user?.email || "user@example.com";
|
|
// ใช้ role หรือ organization หากมีใน session (ต้องแก้ type ใน next-auth.d.ts แล้ว)
|
|
const userRole = session?.user?.role || "Viewer";
|
|
|
|
const handleLogout = async () => {
|
|
await signOut({ redirect: false });
|
|
router.push("/login");
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-8 w-8">
|
|
{/* ใส่ URL รูปถ้ามี */}
|
|
<AvatarImage src={session?.user?.image || ""} alt={userName} />
|
|
<AvatarFallback>{getInitials(userName)}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{userName}</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{userEmail}
|
|
</p>
|
|
<p className="text-xs leading-none text-primary mt-1 font-semibold">
|
|
{userRole}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem onClick={() => router.push('/profile')}>
|
|
Profile
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => router.push('/settings')}>
|
|
Settings
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout}>
|
|
Log out
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
} |