145 lines
4.3 KiB
TypeScript
145 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ChevronsUpDownIcon,
|
|
LogOutIcon,
|
|
Settings2Icon,
|
|
SparklesIcon,
|
|
UserCogIcon,
|
|
} from "lucide-react";
|
|
import { signOut } from "next-auth/react";
|
|
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
useSidebar,
|
|
} from "@/components/ui/sidebar";
|
|
|
|
export interface NavUserData {
|
|
name: string;
|
|
email: string;
|
|
avatar?: string | null;
|
|
}
|
|
|
|
export function NavUser({ user }: { user: NavUserData }) {
|
|
const { isMobile } = useSidebar();
|
|
const initials = (user.name || user.email || "U")
|
|
.slice(0, 2)
|
|
.toUpperCase();
|
|
|
|
const handleSignOut = () => {
|
|
signOut({ callbackUrl: "/login" });
|
|
};
|
|
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
/>
|
|
}
|
|
>
|
|
<Avatar size="sm" className="rounded-lg">
|
|
{user.avatar ? (
|
|
<AvatarImage src={user.avatar} alt={user.name} />
|
|
) : null}
|
|
<AvatarFallback className="rounded-lg font-medium text-xs">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-xs leading-tight">
|
|
<span className="truncate font-semibold text-sidebar-foreground">
|
|
{user.name}
|
|
</span>
|
|
<span className="truncate text-[11px] text-muted-foreground">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
<ChevronsUpDownIcon className="ml-auto size-4 text-muted-foreground" />
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent
|
|
className="w-(--anchor-width) min-w-56 rounded-lg"
|
|
side={isMobile ? "bottom" : "right"}
|
|
align="end"
|
|
sideOffset={4}
|
|
>
|
|
<DropdownMenuLabel className="p-0 font-normal">
|
|
<div className="flex items-center gap-2.5 px-1 py-1.5 text-left text-xs">
|
|
<Avatar size="sm" className="rounded-lg">
|
|
{user.avatar ? (
|
|
<AvatarImage src={user.avatar} alt={user.name} />
|
|
) : null}
|
|
<AvatarFallback className="rounded-lg font-medium text-xs">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-xs leading-tight">
|
|
<span className="truncate font-semibold text-foreground">
|
|
{user.name}
|
|
</span>
|
|
<span className="truncate text-[11px] text-muted-foreground">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<SparklesIcon data-icon="inline-start" />
|
|
<span>升级至专业版</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<UserCogIcon data-icon="inline-start" />
|
|
<span>个人账户设置</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Settings2Icon data-icon="inline-start" />
|
|
<span>系统偏好</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
onClick={handleSignOut}
|
|
className="cursor-pointer"
|
|
>
|
|
<LogOutIcon data-icon="inline-start" />
|
|
<span>退出登录</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
);
|
|
}
|