87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import { CogIcon, HomeIcon } from "@heroicons/react/24/solid";
|
|
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
import NavbarButton from "./navbar-button";
|
|
import ProfileButton from "./profile-button";
|
|
import { SwordIcon, TrendingUpIcon } from "lucide-react";
|
|
|
|
type NavbarItem = {
|
|
name: string;
|
|
link: string;
|
|
align: "left" | "right";
|
|
icon: React.ReactNode;
|
|
};
|
|
|
|
const items: NavbarItem[] = [
|
|
{
|
|
name: "Home",
|
|
link: "/",
|
|
align: "left",
|
|
icon: <HomeIcon className="h-5 w-5" />,
|
|
},
|
|
{
|
|
name: "Ranking",
|
|
link: "/ranking",
|
|
align: "left",
|
|
icon: <TrendingUpIcon className="h-5 w-5" />,
|
|
},
|
|
{
|
|
name: "Score Feed",
|
|
link: "/scores",
|
|
align: "left",
|
|
icon: <SwordIcon className="h-5 w-5" />,
|
|
},
|
|
{
|
|
name: "Search",
|
|
link: "/search",
|
|
align: "right",
|
|
icon: <MagnifyingGlassIcon className="h-5 w-5" />,
|
|
},
|
|
{
|
|
name: "Settings",
|
|
link: "/settings",
|
|
align: "right",
|
|
icon: <CogIcon className="h-5 w-5" />,
|
|
},
|
|
];
|
|
|
|
// Helper function to render each navbar item
|
|
const renderNavbarItem = (item: NavbarItem) => (
|
|
<div className="flex items-center w-fit gap-2">
|
|
{item.icon && <div>{item.icon}</div>}
|
|
<p className="hidden lg:block">{item.name}</p>
|
|
</div>
|
|
);
|
|
|
|
export default function Navbar() {
|
|
const rightItems = items.filter(item => item.align === "right");
|
|
const leftItems = items.filter(item => item.align === "left");
|
|
|
|
return (
|
|
<div className="w-full sticky top-0 z-[999] h-10 items-center flex justify-between bg-secondary/95 px-1">
|
|
<div className="md:max-w-[1600px] w-full h-full flex justify-between m-auto">
|
|
{/* Left-aligned items */}
|
|
<div className="flex items-center h-full">
|
|
<ProfileButton />
|
|
|
|
{leftItems.map((item, index) => (
|
|
<Link href={item.link} key={index} className="h-full">
|
|
<NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right-aligned items */}
|
|
<div className="flex items-center h-full">
|
|
{rightItems.map((item, index) => (
|
|
<Link href={item.link} key={index} className="h-full">
|
|
<NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|