Epicnabbo-Catalogus-Updated-Daily/src/components/top-header.tsx

import Link from "next/link";
import Image from "next/image";
import { auth, signOut } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

function Currency({ icon, amount, label }: { icon: string; amount: number; label: string }) {
  return (
      <div className="flex gap-x-3 sm:gap-x-2 items-center">
          <div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} />
          <div style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
            <span className="font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>
              {amount.toLocaleString()}
            </span>{" "}
            <span>{label}</span>
          </div>
        </div>
  );
}

export async function TopHeader() {
  const session = await auth();
  if (!session?.user?.id) return null;
  const id = Number(session.user.id);

  let credits = 0;
  let duckets = 0;
  let diamonds = 0;
  let look = "";
  try {
    const [user, currencies] = await Promise.all([
      prisma.user.findUnique({ where: { id }, select: { credits: true, look: true } }),
      prisma.usersCurrency.findMany({ where: { userId: id } }),
    ]);
    credits = user?.credits ?? 0;
    look = user?.look ?? "";
    for (const c of currencies) {
      if (c.type === 0) duckets = c.amount;
      if (c.type === 5) diamonds = c.amount;
    }
  } catch {
    // render without live balances
  }

  const imager =
    (await siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage")) ??
    "";
  const avatar = avatarImageUrl(imager, look, { headOnly: true, direction: 2 });
  const isStaff = (session.user.rank ?? 0) >= 7;

  return (
    <div style={{ backgroundColor: "var(--color-navbar)" }}>
      <div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
        <div className="flex gap-x-6">
          <Currency icon="nav-credit-icon" amount={credits} label="Credits" />
          <Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
          <Currency icon="nav-diamond-icon" amount={diamonds} label="Diamonds" />
        </div>

        <div className="flex items-center gap-x-3">
          {isStaff ? (
            <details className="relative">
              <summary
                className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
                style={{ color: "var(--color-navbar-text, var(--color-text))" }}
              >
                Administration
              </summary>
               <div
                 role="menu"
                 className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[180px] rounded-xl z-50 py-2"
               >
                 <Link href="/admin" className="dropdown-item" role="menuitem">
                   Admin panel
                 </Link>
                 <Link href="/admin/commandocentrum" className="dropdown-item" role="menuitem">
                   Commandocentrum
                 </Link>
                  <Link href="/admin/logs" className="dropdown-item" role="menuitem">
                    Logs
                  </Link>
                  <Link href="/logo" className="dropdown-item" role="menuitem">
                    Logo generator
                  </Link>
                </div>
             </details>
            ) : null}

            <details className="relative">
              <summary aria-label="User menu" className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
                <Image className="bg-no-repeat bg-center" src={avatar} alt="" width={54} height={62} unoptimized />
                <span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
              </summary>
              <div
                role="menu"
                className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
              >
                <Link href="/me" className="dropdown-item" role="menuitem">
                  My dashboard
                </Link>
                <Link href={`/u/${session.user.name}`} className="dropdown-item" role="menuitem">
                  My profile
                </Link>
                <Link href="/settings" className="dropdown-item" role="menuitem">
                  User settings
                </Link>
                <Link href="/settings/2fa" className="dropdown-item" role="menuitem">
                  Two-factor
                </Link>
                <Link href="/settings/sessions" className="dropdown-item" role="menuitem">
                  Login activity
                </Link>
                <div className="h-px my-1 mx-3" style={{ backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
                <form
                  action={async () => {
                    "use server";
                    await signOut({ redirectTo: "/" });
                  }}
                >
                  <button
                    type="submit"
                    role="menuitem"
                    className="dropdown-item w-full text-center mx-1 rounded-lg"
                    style={{
                      backgroundColor: "color-mix(in srgb, var(--button-danger-color) 12%, transparent)",
                      color: "var(--button-danger-color)",
                      border: "none",
                      cursor: "pointer",
                      width: "calc(100% - 8px)",
                    }}
                  >
                    Logout
                  </button>
                </form>
              </div>
            </details>
          </div>
        </div>
      </div>
    );
}