CodeSandBox/judge4c_backup_new
2
0
Fork 0
mirror of https://gitlab.massbug.com/massbug/judge4c.git synced 2025-07-04 10:04:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(nav-user): refactor NavUser component to use SidebarMenu and improve user loading state

Browse Source
This commit is contained in:
ngc2207 2025-02-04 14:29:34 +08:00
parent 9729e2d8a0
commit e41b1e4590
1 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/nav-user.tsx
View File

@ -8,8 +8,12 @@ import {
LogOut,
Sparkles,
} from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar";
import {
DropdownMenu,
DropdownMenuContent,
@ -19,23 +23,30 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar";
import { Skeleton } from "./ui/skeleton";
import { useLogout } from "@/features/auth/api/use-logout";
import { useCurrent } from "@/features/auth/api/use-current";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
export function NavUser({
user,
}: {
user: {
name: string;
email: string;
avatar: string;
};
}) {
export function NavUser() {
const { isMobile } = useSidebar();
const { mutate: logout } = useLogout();
const { data: user, isLoading } = useCurrent();
if (isLoading || !user) {
return (
<div className="flex p-2">
<Skeleton className="h-8 w-8 rounded-lg" />
<Skeleton className="flex-1 ml-2" />
</div>
);
}
const { name, email } = user;
const avatarFallback = name
? name.charAt(0).toUpperCase()
: email.charAt(0).toUpperCase() ?? "U";
return (
<SidebarMenu>
@ -47,12 +58,13 @@ export function NavUser({
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
<AvatarFallback className="rounded-lg">
{avatarFallback}
</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">{user.name}</span>
<span className="truncate text-xs">{user.email}</span>
<span className="truncate font-semibold">{name || "User"}</span>
<span className="truncate text-xs">{email}</span>
</div>
<ChevronsUpDown className="ml-auto size-4" />
</SidebarMenuButton>
@ -66,12 +78,15 @@ export function NavUser({
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
<AvatarFallback className="rounded-lg">
{avatarFallback}
</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">{user.name}</span>
<span className="truncate text-xs">{user.email}</span>
<span className="truncate font-semibold">
{name || "User"}
</span>
<span className="truncate text-xs">{email}</span>
</div>
</div>
</DropdownMenuLabel>
@ -98,7 +113,7 @@ export function NavUser({
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<DropdownMenuItem onClick={() => logout()}>
<LogOut />
Log out
</DropdownMenuItem>