All files / components/Navbar/NavbarLink NavbarLink.tsx

80% Statements 4/5
100% Branches 13/13
66.66% Functions 2/3
100% Lines 4/4

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>
			)}
		</>
	)
}