t.indorf
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
import type { ComponentType } from "react";
|
|
import type { LucideProps } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type NavItemProps = {
|
|
href: string;
|
|
label: string;
|
|
icon: ComponentType<LucideProps>;
|
|
active?: boolean;
|
|
badge?: number | string;
|
|
};
|
|
|
|
export function NavItem({
|
|
href,
|
|
label,
|
|
icon: Icon,
|
|
active = false,
|
|
badge,
|
|
}: NavItemProps) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"relative flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13.5px] font-medium text-[var(--ink-soft)] transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]",
|
|
"hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
|
|
active &&
|
|
"bg-[var(--accent-soft)] font-semibold text-[var(--accent-deep)] before:absolute before:left-[-14px] before:top-1.5 before:h-[calc(100%-12px)] before:w-[3px] before:rounded-full before:bg-[var(--accent)]",
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0 [stroke-width:1.7]" />
|
|
<span className="min-w-0 flex-1 truncate">{label}</span>
|
|
{badge ? (
|
|
<span className="rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-2 py-0.5 text-[11px] font-semibold text-[var(--ink-muted)]">
|
|
{badge}
|
|
</span>
|
|
) : null}
|
|
</Link>
|
|
);
|
|
}
|