Frontend/src/app/components/navbar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ReactElement } from "react";
import { HrefButton } from "./href-button";
import Logo from "./logo";
import { ToggleThemeButton } from "./theme-toggle-button";
import { GithubStar } from "@/app/components/github-star";
import { Card } from "@/app/components/card";
import { cn } from "@/app/common/utils";
import { CommandMenu } from "@/app/components/command-menu";

type Page = {
  /**
   * The name of the button for the navbar.
   */
  name: string;

  /**
   * The URL to go to.
   */
  url: string;

  /**
   * Whether to hide the button on mobile.
   */
  hideOnMobile?: boolean;

  /**
   * Whether clicking the button will
   * open the link in a new tab.
   */
  openInNewTab?: boolean;
};

const pages: Page[] = [
  { name: "Player", url: "/player" },
  { name: "Server", url: "/server/java" },
  { name: "Mojang", url: "/mojang/status" },
  { name: "API", url: "https://api.mcutils.xyz", hideOnMobile: true, openInNewTab: true },
  { name: "Docs", url: "/docs" },
];

export default function NavBar(): ReactElement {
  const path: string = usePathname();
  const isDocs: boolean = path ? path.includes("/docs") : false;

  return (
    <Card
      classNameCard="w-full p-0 mt-2 border-none"
      classNameContent="p-0 relative rounded-lg flex justify-between items-center gap-3 px-3 bg-opacity-85 h-12"
    >
      {/* Left */}
      <div className={cn("flex flex-row items-center gap-2 z-50", isDocs ? "w-full md:w-fit" : "w-fit")}>
        <Link href="/" className="flex items-center gap-2">
          <Logo />
        </Link>

        {/* Command Menu */}
        <CommandMenu className={cn(isDocs ? "" : "hidden md:inline-flex")} />
      </div>

      {/* Links */}
      <div className={cn("absolute inset-x-0 justify-center", isDocs ? "hidden md:flex" : "flex")}>
        <div className="flex gap-4">
          {pages.map((page, index) => {
            const isActive: boolean = path ? path.includes(page.url) : false;

            return (
              <HrefButton
                className={cn(isActive ? "text-primary" : "", page.hideOnMobile ? "hidden md:block" : "")}
                key={index}
                title={page.name}
                url={page.url}
                openInNewTab={page.openInNewTab}
              />
            );
          })}
        </div>
      </div>

      {/* Right */}
      <div className="flex gap-4 items-center z-50">
        <ToggleThemeButton />
        <GithubStar className={isDocs ? "hidden md:flex" : "hidden"} />
      </div>
    </Card>
  );
}