26 lines
737 B
TypeScript
26 lines
737 B
TypeScript
import { Link } from "@tanstack/react-router";
|
|
|
|
type NavLinkProps = { to: string; children: React.ReactNode };
|
|
|
|
const NavLink = ({ to, children }: NavLinkProps) => {
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className="relative text-sm font-medium text-(--color-text-muted) transition-colors duration-200
|
|
hover:text-(--color-primary)
|
|
[&.active]:text-(--color-primary)
|
|
[&.active]:after:absolute
|
|
[&.active]:after:-bottom-1
|
|
[&.active]:after:left-0
|
|
[&.active]:after:w-full
|
|
[&.active]:after:h-0.5
|
|
[&.active]:after:bg-(--color-accent)
|
|
[&.active]:after:rounded-full
|
|
[&.active]:after:content-['']"
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default NavLink;
|