34 lines
882 B
TypeScript
34 lines
882 B
TypeScript
|
"use client"
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import { ComponentProps } from "react";
|
||
|
|
import clsx from "clsx";
|
||
|
|
|
||
|
|
|
||
|
|
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 (
|
||
|
|
<>
|
||
|
|
{links.map(e => (<NavLink key={e.link} href={e.link}
|
||
|
|
className={clsx("text-4xl font-black my-2",
|
||
|
|
{
|
||
|
|
"text-destructive": pathname === e.link
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
>{e.label}</NavLink >))
|
||
|
|
}
|
||
|
|
{pathname}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|