30 lines
638 B
TypeScript
30 lines
638 B
TypeScript
|
import Link from 'next/link'
|
||
|
|
import { useRouter } from 'next/router'
|
||
|
|
import { ReactNode } from 'react'
|
||
|
|
import classNames from 'classnames'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
href: string
|
||
|
|
children: string | ReactNode
|
||
|
|
}
|
||
|
|
|
||
|
|
const NavLink = ({ href, children }: Props) => {
|
||
|
|
const router = useRouter()
|
||
|
|
const isActive = router.pathname === href
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link href={href} passHref>
|
||
|
|
<a
|
||
|
|
className={classNames(
|
||
|
|
'text-lg-caps hover:text-white active:text-white',
|
||
|
|
isActive ? 'pointer-events-none text-white' : 'text-white/60',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</a>
|
||
|
|
</Link>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default NavLink
|