Liam
2053f7baef
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m0s
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
"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>
|
|
);
|
|
}
|