Spaces:
Running
Running
File size: 2,879 Bytes
990a158 13ae717 ec1f23a 13ae717 b83ceb7 13ae717 990a158 13ae717 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import {
ChartSpline,
CirclePlus,
FolderCode,
Import,
LogOut,
} from "lucide-react";
import Link from "next/link";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { useUser } from "@/hooks/useUser";
export const UserMenu = ({ className }: { className?: string }) => {
const { logout, user } = useUser();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className={`${className}`}>
<Avatar className="size-8 mr-1">
<AvatarImage src={user?.avatarUrl} alt="@shadcn" />
<AvatarFallback className="text-sm">
{user?.fullname?.charAt(0).toUpperCase() ?? "E"}
</AvatarFallback>
</Avatar>
<span className="max-lg:hidden">{user?.fullname}</span>
<span className="lg:hidden">
{user?.fullname.slice(0, 10)}
{(user?.fullname?.length ?? 0) > 10 ? "..." : ""}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="start">
<DropdownMenuLabel className="font-bold flex items-center gap-2 justify-center">
My Account
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<Link href="/projects/new">
<DropdownMenuItem>
<CirclePlus className="size-4 text-neutral-100" />
New Project
</DropdownMenuItem>
</Link>
<Link href="/projects">
<DropdownMenuItem>
<Import className="size-4 text-neutral-100" />
Import Project
</DropdownMenuItem>
</Link>
<Link href="/projects">
<DropdownMenuItem>
<FolderCode className="size-4 text-neutral-100" />
View Projects
</DropdownMenuItem>
</Link>
<a href="https://huggingface.co/settings/billing" target="_blank">
<DropdownMenuItem>
<ChartSpline className="size-4 text-neutral-100" />
Usage Quota
</DropdownMenuItem>
</a>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
if (confirm("Are you sure you want to log out?")) {
logout();
}
}}
>
<Button size="xs" variant="destructive" className="w-full">
<LogOut className="size-4" />
Log out
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
|