Pill Pill.tsx

100% Statements 8/8

0% Branches 0/1

100% Functions 2/2

100% Lines 7/7

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 3x
3x
3x
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
80x
 
80x
 
 
 
 
 
 
 
 
 
 
  import { Typography } from "@material-ui/core";
import classNames from "classnames";
import makeStyles from "utils/makeStyles";
 
const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(0.5, 1),
    textAlign: "center",
    fontWeight: "bold",
  },
  rounded: {
    borderRadius: theme.shape.borderRadius * 6,
  },
}));
 
export interface PillProps {
  children: React.ReactNode;
  variant?: "rounded" | "square";
}
 
export default function Pill({ children, variant = "rounded" }: PillProps) {
  const classes = useStyles();
 
  return (
    <Typography
      className={classNames(classes.root, {
        [classes.rounded]: variant === "rounded",
      })}
      variant="body2"
    >
      {children}
    </Typography>
  );
}