Exched/DeepSeek_Coder

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