awdaw

[reef raven]

import { SecondaryNav } from "@/components/dashboard/secondary-nav";
import { biolinkCustomizationLinks } from "@/constants/nav-links";

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div>
<SecondaryNav items={biolinkCustomizationLinks} />
{children}
</div>
);
}

"use client";

import { cn } from "@/lib/utils";
import Link from "next/link";
import { usePathname } from "next/navigation";

export function SecondaryNav({
items,
}: {
items: { name: string; href: string }[];
}) {
const pathname = usePathname();
return (
<nav className="w-full">
<ul className="flex w-full border-b">
{items.map((item, index) => (
<li key={index}>
<Link
href={item.href}
className={cn(
"flex items-center gap-2 border-2 border-transparent px-3 py-2 text-sm",
pathname === item.href && "border-b-foreground",
)}
>
{item.name}
</Link>
</li>
))}
</ul>
</nav>
);
}

whats wrong with this

[blazing vessel]

Hi @reef raven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the provided knowledge sources, there doesn't seem to be any apparent issues with the code you've shared. It's a Next.js component using the usePathname hook from next/navigation to determine the current path and apply a specific class if the path matches the href of the item.

However, without more context or a specific error message, it's hard to determine what could be wrong. If you're encountering an issue, please provide more details such as error messages, unexpected behavior, or the context in which this component is used.

If you're unsure about how to use the usePathname hook or the Link component in Next.js, you can refer to the Next.js documentation or the relevant GitHub issues for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: