Mobile SweepstakePurchaseBox.tsx

0% Statements 0/4

0% Branches 0/8

0% Functions 0/1

0% Lines 0/4

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
57
58
59  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Text } from "@common/Text";
import { Box } from "@mui/material";
import { palette } from "@palette";
 
type SweepstakePurchaseBoxProps = {
  title: string | React.ReactNode;
  value: string | number;
  flexEnd?: boolean;
  isAmount?: boolean;
  reverse?: boolean;
  titleSx?: React.CSSProperties;
};
 
const SweepstakePurchaseBox = ({
  title,
  value,
  flexEnd,
  isAmount,
  reverse,
  titleSx,
}: SweepstakePurchaseBoxProps) => {
  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems={flexEnd ? "flex-end" : "flex-start"}
    >
      {!reverse ? (
        <>
          <Text sx={{ ...titleStyle, ...titleSx }}>{title}</Text>
          <Text sx={valueStyle}>
            {value} {isAmount && <sup>USD</sup>}
          </Text>
        </>
      ) : (
        <>
          <Text sx={valueStyle}>
            {value} {isAmount && <sup>USD</sup>}
          </Text>
          <Text sx={{ ...titleStyle, ...titleSx }}>{title}</Text>
        </>
      )}
    </Box>
  );
};
 
const titleStyle = {
  color: palette.neutral[800],
  fontWeight: "500",
  fontSize: "16px",
};
 
const valueStyle = {
  color: palette.neutral[600],
  fontWeight: "400",
};
 
export default SweepstakePurchaseBox;