emptyStates GiveOFACEmptyState.tsx

100% Statements 3/3

85.71% Branches 6/7

100% Functions 1/1

100% Lines 3/3

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
46
47
48
49
50
51
52
53
54
55
56  
 
 
 
 
 
 
 
 
 
5x
 
 
 
20x
 
20x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Box } from "@mui/material";
import { ListMagnifyingGlassIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
 
interface GiveCheckEmptyStateProps {
  showBorder?: boolean;
  minHeight?: number | string;
}
 
const GiveOFACEmptyState = ({
  showBorder = true,
  minHeight = 0,
}: GiveCheckEmptyStateProps = {}) => {
  const theme = useAppTheme();
 
  return (
    <Box
      sx={{
        ...(showBorder && {
          border: `1px solid ${theme.palette.border?.primary}`,
          borderRadius: `${theme.customs?.radius.medium}px`,
        }),
        width: "100%",
        flex: 1,
        minHeight,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 1,
        ...(showBorder ? {} : { width: "100%" }),
      }}
    >
      <Box
        sx={{
          width: 56,
          height: 56,
          borderRadius: "50%",
          backgroundColor: theme.palette.primitive?.transparent?.["darken-5"],
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <ListMagnifyingGlassIcon size={24} />
      </Box>
      <GiveText variant="bodyS" color="secondary">
        No Results
      </GiveText>
    </Box>
  );
};
 
export default GiveOFACEmptyState;