Pill Pill.tsx

100% Statements 6/6

80% Branches 4/5

100% Functions 2/2

100% Lines 5/5

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
41
42
43
44
45 11x
11x
11x
 
 
 
 
 
 
88x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Typography } from "@mui/material";
import { styled } from "@mui/system";
import { theme } from "theme";
 
interface PillStylesProps {
  backgroundColor?: string;
  color?: string;
}
 
const StyledPill = styled(Typography)<PillStylesProps>(({ theme }) => ({
  padding: theme.spacing(0.6, 1),
  textAlign: "center",
  fontWeight: "bold",
  margin: theme.spacing(0.5),
  fontSize: ".8rem",
}));
 
export interface PillProps {
  children: React.ReactNode;
  backgroundColor?: string;
  color?: string;
  variant?: "rounded";
}
 
export default function Pill({
  children,
  backgroundColor = theme.palette.grey[200],
  color = theme.palette.text.primary,
  variant = "rounded",
}: PillProps) {
  return (
    <StyledPill
      sx={{
        backgroundColor,
        color,
        ...(variant === "rounded" && {
          borderRadius: theme.shape.borderRadius * 6,
        }),
      }}
    >
      {children}
    </StyledPill>
  );
}