ui Tag.tsx

100% Statements 1/1

100% Branches 3/3

100% Functions 1/1

100% Lines 1/1

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
271x
 
 
 
 
 
 
 
 
 
 
  import type { ReactNode } from 'react';
 
interface TagProps {
  /** Selected state: brand-tinted fill, border and text. */
  active?: boolean;
  onClick?: () => void;
  children: ReactNode;
}
 
/**
 * Rounded filter tag. Styling lives in globals.css (`.tag`) so the hover and
 * selected states are CSS-driven; this component only composes class names.
 */
export function Tag({ active = false, onClick, children }: TagProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={active ? 'tag tag--active' : 'tag'}
      aria-pressed={active}
    >
      {children}
    </button>
  );
}