RESTfulMC/Frontend/src/app/components/navbar.tsx

83 lines
2.2 KiB
TypeScript
Raw Normal View History

2024-04-16 06:59:20 -07:00
import GitHubStarCount from "@/components/github-star-count";
2024-04-15 19:31:55 -07:00
import MinecraftButton from "@/components/minecraft-button";
2024-04-16 06:59:20 -07:00
import { Skeleton } from "@/components/ui/skeleton";
2024-04-15 15:00:47 -07:00
import config from "@/config";
2024-04-15 19:31:55 -07:00
import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
import { StarIcon } from "@heroicons/react/24/outline";
2024-04-15 19:53:23 -07:00
import Image from "next/image";
2024-04-15 15:00:47 -07:00
import Link from "next/link";
2024-04-16 06:59:20 -07:00
import { Suspense } from "react";
2024-04-15 15:00:47 -07:00
/**
* The navbar for the site.
*
* @returns the navbar jsx
*/
2024-04-15 19:31:55 -07:00
const Navbar = (): JSX.Element => (
2024-04-16 07:52:44 -07:00
<nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
2024-04-15 19:31:55 -07:00
{/* Left */}
2024-04-15 20:24:50 -07:00
<div className="flex gap-7 lg:gap-12 items-center transition-all transform-gpu">
2024-04-15 19:31:55 -07:00
{/* App Branding */}
2024-04-15 15:00:47 -07:00
<Link
2024-04-15 19:31:55 -07:00
className={cn(
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
minecrafter.className
)}
2024-04-15 15:00:47 -07:00
href="/"
>
2024-04-15 19:53:23 -07:00
{/* Small Screens */}
<Image
2024-04-16 06:59:20 -07:00
className="hidden sm:flex lg:hidden"
2024-04-15 19:53:23 -07:00
src="/media/logo.webp"
alt="Site Logo"
width={42}
height={42}
/>
{/* Large Screens */}
2024-04-16 06:59:20 -07:00
<span className="hidden lg:flex">{config.siteName}</span>
2024-04-15 15:00:47 -07:00
</Link>
2024-04-15 19:31:55 -07:00
{/* Links */}
<div className="flex gap-7">
{Object.entries(config.navbarLinks).map((link, index) => (
<Link
key={index}
className="font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu"
href={link[1]}
>
{link[0]}
</Link>
))}
</div>
2024-04-15 15:00:47 -07:00
</div>
2024-04-15 19:31:55 -07:00
{/* Social Buttons */}
2024-04-16 06:59:20 -07:00
<div className="hidden md:flex">
2024-04-15 19:31:55 -07:00
{/* Star on Github <3 */}
2024-04-16 06:59:20 -07:00
<MinecraftButton className="group/star">
2024-04-15 19:31:55 -07:00
<Link
className="flex gap-1.5 items-center"
href="https://github.com/Rainnny7/RESTfulMC"
2024-04-16 07:26:19 -07:00
rel="noopener noreferrer"
target="_blank"
2024-04-15 19:31:55 -07:00
>
2024-04-16 06:59:20 -07:00
{/* Star Count */}
<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
<GitHubStarCount />
</Suspense>
<StarIcon
className="group-hover/star:text-orange-400 delay-0 transition-all transform-gpu"
width={22}
height={22}
/>
2024-04-15 19:31:55 -07:00
<span>Star on GitHub</span>
</Link>
</MinecraftButton>
</div>
2024-04-15 15:00:47 -07:00
</nav>
);
export default Navbar;