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 | import RateIcon from "@assets/icons/RateIcon";
import { Text } from "@common/Text";
import { Box } from "@mui/material";
import { memo } from "react";
const TrendsComponent = ({
label,
isPositive,
rate,
value,
hideRate,
}: {
label: string;
isPositive: boolean;
rate: number;
value: string | number;
hideRate: boolean;
}) => {
const r = Math.abs(rate);
return (
<Box my="4px">
<Text fontWeight="book" fontSize="14px" color="#575353" mb="8px">
{label}
</Text>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Text fontWeight="book" fontSize="18px" color="#292727">
{value}
</Text>
{r !== 0 && !hideRate && (
<Box gap="5px" display="flex" alignItems="center">
<Text color="#292727" fontWeight="book" fontSize="12px">
{r} %
</Text>
<Box
sx={{
transform: `rotate(${isPositive ? "0deg" : "180deg"})`,
}}
>
<RateIcon fill={isPositive ? "#13A75A" : "#BB1111"} />
</Box>
</Box>
)}
</Box>
</Box>
);
};
export default memo(TrendsComponent);
|