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";

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

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

  /**
   * 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", openInNewTab: true },
];

export default function NavBar(): ReactElement {
  const path = usePathname();

  return (
    <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
      <Link href="/" className="flex items-center gap-2 pl-3 pr-1">
        <Logo />
        <p className="hidden md:block">Minecraft Utilities</p>
      </Link>

      <div className="flex-grow" />

      <div className="flex gap-4">
        {pages.map((page, index) => {
          const isActive = path.includes(page.url);

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

      <div className="flex-grow" />

      <div className="mr-4 flex items-center gap-2">
        <div className="hidden md:block">
          <HrefButton
            title="Star us on Github!"
            url="https://github.com/RealFascinated/minecraft-helper"
            openInNewTab
          />
        </div>
        <ToggleThemeButton />
      </div>
    </div>
  );
}