Ticker TickerItem.tsx

0% Statements 0/1
100% Branches 0/0
0% Functions 0/1
0% Lines 0/1
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import theme from "@theme/index";
import Box from "@mui/material/Box";
import { Text } from "@common/Text";
import { palette } from "@theme/colors";
import { toEnFormat, truncateString } from "utils";
 
// interface
interface TickerProps {
  coast: number;
  fullName: string;
  days: number;
}
 
function TickerItem({ coast, fullName, days }: TickerProps) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "80px",
        width: "180px",
        padding: "0 8px 0 8px",
        transition: "0.1s",
        
 
        "&:hover": {
          backgroundColor: "#FFFFFF",
          borderRadius: "8px",
        },
 
        [theme.breakpoints.down("sm")]: {
          width: "286px",
          maxHeight: "48px",
          flexDirection: "row",
          alignItems: "center",
        },
      }}
    >
      <Text
        mr={2}
        variant="h6"
        fontWeight="book"
        color={palette.neutral[90]}
      >
        {truncateString(toEnFormat(coast))}
        <Box
          ml={0.5}
          component="sup"
          fontSize="14px"
          color={palette.neutral[70]}
        >
          USD
        </Box>
      </Text>
      <Box>
        <Text
          variant="h6"
          fontWeight="light"
          color={palette.neutral[90]}
          sx={{ 
            overflow: "hidden",
            whiteSpace: "nowrap",
          }}
        >
          {fullName}
        </Text>
        <Text
          variant="body"
          fontWeight="light"
          color={palette.neutral[80]}
        >
          {days} Days Ago
        </Text>
      </Box>
    </Box>
  );
}
 
export default TickerItem;