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 | 36x 36x 36x 36x 36x 108x | import { Box, Stack } from "@mui/material";
import { RiskLevelIndicatorProps, RiskProgressBarsProps } from "../utils";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
export function RiskLevelIndicator({
level,
bgColor,
textColor,
}: RiskLevelIndicatorProps) {
const safeTextColor = textColor || "error";
return (
<Box
display="flex"
alignItems="center"
justifyContent="center"
width="26px"
height="22px"
borderRadius="8px"
bgcolor={bgColor}
data-testid="risk-level-indicator"
>
<GiveText
variant="bodyXS"
color={safeTextColor as any}
lineHeight={1.5}
data-testid="risk-level-value"
>
{level}
</GiveText>
</Box>
);
}
export function RiskProgressBars({
segments,
activeColor,
}: RiskProgressBarsProps) {
const { palette } = useAppTheme();
const inactiveColor = palette.surface?.tertiary;
return (
<Stack
direction="row"
alignItems="center"
gap={1}
flex={1}
data-testid="risk-progress-bars"
>
{segments.map((segment) => (
<Box
key={segment.id}
height="5px"
flex={1}
borderRadius="8px"
bgcolor={segment.active ? activeColor : inactiveColor}
data-testid={`risk-segment-${segment.id}`}
/>
))}
</Stack>
);
}
|