components SelectionCheckbox.tsx

100% Statements 2/2

100% Branches 4/4

100% Functions 1/1

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
33
34
35
36
37
38
39  
 
 
 
 
 
1x
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
 
interface SelectionCheckboxProps {
  isSelected: boolean;
}
 
export const SelectionCheckbox: React.FC<SelectionCheckboxProps> = ({
  isSelected,
}) => (
  <div className="absolute top-4 right-4 z-10">
    <div
      data-testid="checkbox-inner-div"
      className={`
        w-7 h-7 rounded-lg border-2 flex items-center justify-center
        transition-all duration-200
        ${
          isSelected
            ? "bg-blue-500 border-blue-500 scale-110"
            : "bg-white border-gray-300 group-hover:border-gray-400"
        }
      `}
    >
      {isSelected && (
        <svg
          className="w-4 h-4 text-white"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="3"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path d="M5 13l4 4L19 7" data-testid="checkmark-path" />
        </svg>
      )}
    </div>
  </div>
);