34 lines
822 B
TypeScript
34 lines
822 B
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
export interface NavLinkProps {
|
|
href: string
|
|
children: React.ReactNode
|
|
icon?: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function NavLink({ href, children, icon, className = '' }: NavLinkProps) {
|
|
const pathname = usePathname()
|
|
const isActive = pathname === href || (href !== '/' && pathname.startsWith(href))
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`
|
|
flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors
|
|
${isActive
|
|
? 'text-white bg-zinc-800'
|
|
: 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
|
|
}
|
|
${className}
|
|
`}
|
|
>
|
|
{icon && <span className="w-5 h-5">{icon}</span>}
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|