t5de-hub/apps/web/components/header-client.tsx

"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { Menu } from "@base-ui/react/menu";
import { ChevronDown } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { cn } from "@/lib/utils";

/** A link in a navigation bar, marked when it's the current page (or, unless exact, a page under it). */
export function NavLink({
  href,
  exact = false,
  children,
}: {
  href: string;
  exact?: boolean;
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const here = pathname === href || (!exact && pathname.startsWith(href + "/"));
  return (
    <Link
      href={href}
      aria-current={here ? "page" : undefined}
      className={cn(
        "rounded-md px-2.5 py-1.5 text-muted-foreground transition-colors hover:text-foreground",
        here && "bg-muted text-foreground",
      )}
    >
      {children}
    </Link>
  );
}

/** The signed-in person's menu: their picture and name, opening their pages and signing out. */
export function ProfileMenu({ username, picture, console }: { username: string; picture: string | null; console: boolean }) {
  const router = useRouter();
  const [signingOut, setSigningOut] = useState(false);
  const item =
    "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[highlighted]:bg-muted";
  return (
    <Menu.Root>
      <Menu.Trigger
        className="flex items-center gap-2 rounded-full py-1 pr-2.5 pl-1 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[popup-open]:bg-muted"
        aria-label="Your account"
      >
        <Avatar username={username} picture={picture} />
        <span className="hidden max-w-40 truncate sm:inline">{username}</span>
        <ChevronDown className="size-4 text-muted-foreground" aria-hidden />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner align="end" sideOffset={6} className="z-50">
          <Menu.Popup className="min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none">
            <Menu.LinkItem className={item} render={<Link href="/account" />}>
              Account
            </Menu.LinkItem>
            <Menu.LinkItem className={item} render={<Link href="/library" />}>
              Library
            </Menu.LinkItem>
            {console && (
              <Menu.LinkItem className={item} render={<Link href="/console" />}>
                Console
              </Menu.LinkItem>
            )}
            <Menu.Separator className="-mx-1 my-1 h-px bg-border" />
            <Menu.Item
              className={item}
              disabled={signingOut}
              onClick={async () => {
                setSigningOut(true);
                await authClient.signOut();
                router.push("/");
                router.refresh();
              }}
            >
              {signingOut ? "Signing out…" : "Sign out"}
            </Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

/** A person's picture (their first linked IMVU account's avatar), or their initial. */
function Avatar({ username, picture }: { username: string; picture: string | null }) {
  const [failed, setFailed] = useState(false);
  if (picture && !failed) {
    return (
      <img src={picture} alt="" onError={() => setFailed(true)} className="size-7 rounded-full bg-muted object-cover object-top" />
    );
  }
  return (
    <span className="grid size-7 place-items-center rounded-full bg-muted text-xs font-semibold uppercase" aria-hidden>
      {username.slice(0, 1)}
    </span>
  );
}