86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuLabel,
|
||
|
|
DropdownMenuSeparator,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from "@/components/ui/dropdown-menu";
|
||
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||
|
|
import { LogOut, Settings, User } from "lucide-react";
|
||
|
|
|
||
|
|
interface AvatarDropdownProps {
|
||
|
|
username: string;
|
||
|
|
role: {
|
||
|
|
roleName: string;
|
||
|
|
priority: number;
|
||
|
|
};
|
||
|
|
onLogOut: () => void;
|
||
|
|
onSettings?: () => void;
|
||
|
|
onProfile?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function AvatarDropdown({
|
||
|
|
username,
|
||
|
|
role,
|
||
|
|
onLogOut,
|
||
|
|
onSettings,
|
||
|
|
onProfile,
|
||
|
|
}: AvatarDropdownProps) {
|
||
|
|
// Get initials from username
|
||
|
|
const getInitials = (name: string): string => {
|
||
|
|
if (!name) return "U";
|
||
|
|
const parts = name.split(" ");
|
||
|
|
if (parts.length >= 2) {
|
||
|
|
return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
|
||
|
|
}
|
||
|
|
return name.substring(0, 2).toUpperCase();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild>
|
||
|
|
<button className="flex items-center gap-2 rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
|
||
|
|
<Avatar className="h-9 w-9 cursor-pointer">
|
||
|
|
<AvatarImage src="" alt={username} />
|
||
|
|
<AvatarFallback className="bg-primary text-primary-foreground text-sm font-medium">
|
||
|
|
{getInitials(username)}
|
||
|
|
</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
</button>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="end" className="w-56">
|
||
|
|
<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">
|
||
|
|
{role.roleName || "Người dùng"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</DropdownMenuLabel>
|
||
|
|
<DropdownMenuSeparator />
|
||
|
|
{onProfile && (
|
||
|
|
<DropdownMenuItem onClick={onProfile} className="cursor-pointer">
|
||
|
|
<User className="mr-2 h-4 w-4" />
|
||
|
|
<span>Tài khoản của tôi</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
)}
|
||
|
|
{onSettings && (
|
||
|
|
<DropdownMenuItem onClick={onSettings} className="cursor-pointer">
|
||
|
|
<Settings className="mr-2 h-4 w-4" />
|
||
|
|
<span>Cài đặt</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
)}
|
||
|
|
{(onProfile || onSettings) && <DropdownMenuSeparator />}
|
||
|
|
<DropdownMenuItem
|
||
|
|
onClick={onLogOut}
|
||
|
|
className="cursor-pointer text-destructive focus:text-destructive"
|
||
|
|
>
|
||
|
|
<LogOut className="mr-2 h-4 w-4" />
|
||
|
|
<span>Đăng xuất</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
);
|
||
|
|
}
|