Sub Navbar Pills

---
/**
 * SubNavbarPills — Secondary horizontal sub-navigation bar with scrollable pill links and badge counters.
 * 
 * @param {Array<{label: string, href: string, count?: number, active?: boolean}>} items - Nav links list.
 * @param {string} className - Optional CSS class.
 */
interface Props {
  items?: Array<{ label: string; href: string; count?: number; active?: boolean }>;
  className?: string;
}

const {
  items = [
    { label: 'All Items', href: '#all', count: 124, active: true },
    { label: 'Components', href: '#components', count: 86 },
    { label: 'Templates', href: '#templates', count: 18 },
    { label: 'Icons', href: '#icons', count: 20 },
    { label: 'Guides', href: '#guides' },
  ],
  className = '',
} = Astro.props;
---

<nav class:list={['subnav-pills', className]} aria-label="Sub navigation">
  <div class="subnav-pills__track">
    {items.map((item) => (
      <a
        href={item.href}
        class:list={['subnav-pills__link', { 'is-active': item.active }]}
        aria-current={item.active ? 'page' : undefined}
      >
        <span>{item.label}</span>
        {item.count !== undefined && (
          <span class="subnav-pills__count">{item.count}</span>
        )}
      </a>
    ))}
  </div>
</nav>

<style>
  .subnav-pills {
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-sans, system-ui, sans-serif);
  }

  .subnav-pills::-webkit-scrollbar {
    display: none;
  }

  .subnav-pills__track {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
  }

  .subnav-pills__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.45rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-full, 9999px);
    color: var(--c-text-2, #a3a3a3);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
  }

  .subnav-pills__link:hover {
    color: var(--c-text-1, #ffffff);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
  }

  .subnav-pills__link.is-active {
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.25), rgba(212, 160, 23, 0.25));
    border-color: rgba(184, 134, 11, 0.5);
    color: var(--c-accent, #fef3c7);
  }

  .subnav-pills__count {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 7px;
    border-radius: var(--r-full, 9999px);
    color: inherit;
  }
</style>