BillTracker/client/components/layout/NavPill.jsx

import React, { useMemo } from 'react';
import { NavLink } from 'react-router-dom';
import { cn } from '@/lib/utils';

export const NavPill = React.memo(function NavPill({ item, onNavigate, badge }) {
  const Icon = useMemo(() => item.icon, [item.icon]);
  const to = useMemo(() => item.to, [item.to]);
  const end = useMemo(() => item.end, [item.end]);
  const label = useMemo(() => item.label, [item.label]);

  return (
    <NavLink
      to={to}
      end={end}
      onClick={onNavigate}
      className={({ isActive }) => cn(
        'inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition-all',
        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
        isActive
          ? 'bg-primary text-primary-foreground shadow-sm shadow-primary/20'
          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground hover:shadow-sm'
      )}
    >
      <Icon className="h-4 w-4" />
      <span>{label}</span>
      {badge > 0 && (
        <span className="ml-0.5 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold leading-none text-white">
          {badge > 99 ? '99+' : badge}
        </span>
      )}
    </NavLink>
  );
});

NavPill.displayName = 'NavPill';