ui Switch.tsx

100% Statements 4/4

50% Branches 1/2

100% Functions 2/2

100% Lines 4/4

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
33
34
35
36 1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
306x
306x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
  'use client';
 
import { useId } from 'react';
 
interface SwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label: string;
  className?: string;
}
 
/**
 * On / off toggle (`role="switch"`) with a trailing label. Styling lives in
 * globals.css (`.switch*`).
 */
export function Switch({ checked, onChange, label, className }: SwitchProps) {
  const labelId = useId();
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-labelledby={labelId}
      className={className ? `switch ${className}` : 'switch'}
      onClick={() => onChange(!checked)}
    >
      <span className="switch__track" aria-hidden="true">
        <span className="switch__thumb" />
      </span>
      <span id={labelId} className="switch__label">
        {label}
      </span>
    </button>
  );
}