Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 98x 824x 824x 6x | import Link from 'next/link'
type NavbarLinkProps = (
| {
/** Link to go when you click navbar link. */
href: string
}
| {
/** Function that gets called when you click navbar link. */
onClick: () => void
}
) & {
/** The content inside the navbar link. */
children: React.ReactNode
/** Change look of link and disable it to show that it is active. */
isActive?: boolean
/** Use this to select element for testing. */
datacy?: string
}
/**
* Navbar Link to use in Navbar. Handles the to and onClick and have an active state.
*/
export const NavbarLink: React.FC<NavbarLinkProps> = ({ children, datacy, isActive = false, ...props }) => {
// CSS classes
const classes = `${
isActive
? 'font-bold text-red-700 cursor-default'
: 'font-semibold text-dark hover:text-dark-300 focus:text-dark-400'
}`
return (
<>
{/* Link with to */}
{'href' in props && (
<Link
datacy={datacy}
href={isActive ? '' : props.href}
onClick={isActive ? (event) => event.preventDefault() : () => ''}
tabIndex={isActive ? -1 : 0}
className={classes}
>
{children}
</Link>
)}
{/* Link Button with onClick */}
{'onClick' in props && (
<button datacy={datacy} className={classes} disabled={isActive} onClick={props.onClick}>
{children}
</button>
)}
</>
)
}
|