75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useAuth } from "@/context/auth-context"
|
|
import { LogOut, Package, Settings, User } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
export function UserNav() {
|
|
const { user, logout } = useAuth()
|
|
|
|
if (!user) {
|
|
return (
|
|
<Link href="/login">
|
|
<Button variant="secondary">登录</Button>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarFallback>{user.username.charAt(0).toUpperCase()}</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">{user.username}</p>
|
|
<p className="text-xs leading-none text-muted-foreground">{user.email}</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/profile">
|
|
<User className="mr-2 h-4 w-4" />
|
|
<span>个人资料</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/orders">
|
|
<Package className="mr-2 h-4 w-4" />
|
|
<span>我的订单</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/settings">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
<span>设置</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={logout}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>退出登录</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|