chart waffle-chart.tsx

0% Statements 0/7

100% Branches 0/0

0% Functions 0/2

0% Lines 0/6

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
40  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Box } from '@stacks/ui';
import React, { FC } from 'react';
import ReactCardFlip from 'react-card-flip';
 
interface WaffleChartProps {
  points: boolean[];
}
 
export const WaffleChart: FC<WaffleChartProps> = ({ points }) => {
  return (
    <>
      {points.map((active, key) => (
        <ReactCardFlip
          key={key}
          isFlipped={!active}
          flipSpeedBackToFront={1}
          flipSpeedFrontToBack={1}
        >
          <Box
            width="22px"
            height="22px"
            backgroundColor="blue.300"
            mr="3px"
            mb="3px"
            borderRadius="2px"
          />
          <Box
            width="22px"
            height="22px"
            backgroundColor="ink.150"
            mr="3px"
            mb="3px"
            borderRadius="2px"
          />
        </ReactCardFlip>
      ))}
    </>
  );
};