user-nav.tsx•1.65 kB
"use client";
import { Avatar, AvatarFallback, AvatarImage } from "@repo/ui/components/ui/avatar";
import { Button } from "@repo/ui/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@repo/ui/components/ui/dropdown-menu";
import Link from "next/link";
import { useEffect, useState } from "react";
export function UserNav() {
const [userName, setUserName] = useState("用户");
const [userEmail, setUserEmail] = useState("");
useEffect(() => {
// TODO: Fetch user data from API
// This is a placeholder. Replace with actual API call.
}, []);
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
<Avatar className="h-8 w-8">
<AvatarImage src="/avatars/01.png" alt={userName} />
<AvatarFallback>{userName[0]}</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuItem className="font-normal">
<Link href="/idc/profile/account">
<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>
</div>
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="/signin">退出登录</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}