28 lines
714 B
TypeScript
28 lines
714 B
TypeScript
import React from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import clsx from 'clsx';
|
|
|
|
export const NavItem: React.FC<{
|
|
to: string;
|
|
label: string;
|
|
}> = React.memo((props) => {
|
|
const location = useLocation();
|
|
|
|
const isCurrent = location.pathname.startsWith(props.to);
|
|
|
|
return (
|
|
<Link to={props.to}>
|
|
<div
|
|
className={clsx('border-b-2 leading-[3.75rem]', {
|
|
'border-blue-500 text-gray-950 dark:text-gray-200': isCurrent,
|
|
'border-transparent text-gray-900 hover:border-blue-500 hover:text-gray-950 dark:text-gray-400':
|
|
!isCurrent,
|
|
})}
|
|
>
|
|
{props.label}
|
|
</div>
|
|
</Link>
|
|
);
|
|
});
|
|
NavItem.displayName = 'NavItem';
|