41 lines
1.5 KiB
TypeScript
41 lines
1.5 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";
|
|
import { ArrowUpNarrowWide, BookOpen, BookOpenText } from "lucide-react";
|
|
|
|
|
|
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", icon: <BookOpenText /> },
|
|
{ link: "/publication", label: "PUBLICATIONS", icon: <BookOpen /> },
|
|
{ link: "/submission", label: "SUBMISSIONS", icon: <ArrowUpNarrowWide /> },
|
|
]
|
|
return (
|
|
<div className={props.className}>
|
|
<div className="text-secondary-foreground flex flex-row md:flex-col" >
|
|
{
|
|
links.map(e => (<NavLink key={e.link} href={e.link}
|
|
className={twMerge(clsx("text-xl drop-shadow font-black my-2 w-full mr-2 p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-3xl md:rounded-l-3xl ",
|
|
{
|
|
"text-primary-foreground bg-primary": pathname.includes(e.link)
|
|
}
|
|
))}
|
|
>
|
|
<p className="drop-shadow-sm hidden md:block">{e.label}</p>
|
|
<span className="block md:hidden">{e.icon}</span>
|
|
</NavLink >))
|
|
}
|
|
</ div>
|
|
</div>
|
|
)
|
|
}
|