ui FilterPills.tsx

100% Statements 2/2

100% Branches 6/6

100% Functions 2/2

100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32  
 
 
 
 
 
 
 
 
 
 
 
41x
 
 
 
104x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import Link from "next/link";
import { CheckIcon } from "./CheckIcon";
 
export interface FilterPill {
  label: string;
  href: string;
  current: boolean;
}
 
// Filter pills (DESIGN.md §5): 44px, pill radius; the current one is chip fill +
// primary border + a check glyph, never colour alone. Links, so a filter is a URL.
export function FilterPills({ label, pills }: { label: string; pills: FilterPill[] }) {
  return (
    <nav aria-label={label}>
      <ul className="flex flex-wrap gap-2">
        {pills.map((pill) => (
          <li key={pill.href}>
            <Link
              href={pill.href}
              aria-current={pill.current ? "page" : undefined}
              className={`inline-flex h-11 items-center gap-1.5 rounded-pill border px-4 text-sm no-underline ${pill.current ? "border-primary bg-chip font-semibold text-chip-ink" : "border-hairline bg-glass text-ink"}`}
            >
              {pill.current && <CheckIcon />}
              {pill.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}