26 lines
770 B
TypeScript
26 lines
770 B
TypeScript
import type { LinkProps } from "@tanstack/react-router";
|
|
import { Link } from "@tanstack/react-router";
|
|
import type { ComponentProps } from "react";
|
|
|
|
interface NavLinkProps extends Omit<LinkProps, "children"> {
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export default function NavLink({ label, icon, ...props }: NavLinkProps) {
|
|
return (
|
|
<Link
|
|
{...props}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-2 px-3 py-2 rounded-md transition-colors cursor-pointer ${
|
|
isActive
|
|
? "bg-zinc-100 font-medium text-zinc-900"
|
|
: "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900"
|
|
}`
|
|
}
|
|
>
|
|
{icon && <span className="flex-shrink-0">{icon}</span>}
|
|
<span>{label}</span>
|
|
</Link>
|
|
);
|
|
} |