components Pills.tsx

60% Statements 3/5

0% Branches 0/2

33.33% Functions 1/3

60% Lines 3/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  
 
 
 
 
 
 
 
 
 
 
12x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12x
12x
 
 
 
 
 
 
 
  import React from "react";
import { Box, Grid } from "@mui/material";
import { styled } from "@theme/v2/Provider";
 
type Statuses = {
  pah: boolean;
  business_details: boolean;
  bank_account: boolean;
  merchant_agreement: boolean;
};
 
export const Pills = ({ statuses }: { statuses: Statuses }) => {
  return (
    <Grid
      container
      alignItems="center"
      justifyContent="space-between"
      height="14px"
      gap="6px"
    >
      <Pill status={statuses.pah} />
      <Pill status={statuses.business_details} />
      <Pill status={statuses.bank_account} />
      <Pill status={statuses.merchant_agreement} />
    </Grid>
  );
};
 
const Pill = styled(Box, {
  shouldForwardProp: (prop) => prop !== "status",
})<{ status: boolean }>(({ status, theme }) => ({
  flex: 1,
  height: "3px",
  borderRadius: "2px",
  background: theme.palette.icon?.["icon-primary"],
  opacity: status ? 1 : 0.3,
}));