37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
"use client"
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { ComponentProps } from "react";
|
|
import clsx from "clsx";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
|
|
function NavLink(props: ComponentProps<"div"> & { href: string }) {
|
|
return (
|
|
<Link href={props.href}><h1 className={props.className}>{props.children}</h1></Link>
|
|
)
|
|
}
|
|
export default function Navlinks(props: ComponentProps<"div">) {
|
|
const pathname = usePathname()
|
|
const links = [
|
|
{ link: "/story", label: "STORIES" },
|
|
{ link: "/publication", label: "PUBLICATIONS" },
|
|
{ link: "/submission", label: "SUBMISSIONS" },
|
|
]
|
|
return (
|
|
<div className={props.className}>
|
|
<div className="text-secondary-foreground" >
|
|
{
|
|
links.map(e => (<NavLink key={e.link} href={e.link}
|
|
className={twMerge(clsx("text-xl drop-shadow font-black my-2 w-full pl-2 antialiased text-secondary-foreground bg-secondary",
|
|
{
|
|
"text-primary-foreground bg-primary": pathname.includes(e.link)
|
|
}
|
|
))}
|
|
><p className="drop-shadow-sm">{e.label}</p></NavLink >))
|
|
}
|
|
</ div>
|
|
</div>
|
|
)
|
|
}
|