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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import { DetectiveIcon } from "@assets/icons/RebrandedIcons";
import { Stack, SxProps, styled } from "@mui/material";
import { palette } from "@palette";
import { CheckIcon, SirenIcon } from "@phosphor-icons/react";
import { useAppTheme } from "@theme/v2/Provider";
export const RiskStatusIcons: any = {
routine_monitoring: ({ color = palette.neutral[70] }) => (
<CheckIcon fill="#004F2C" />
),
alerted: ({ color }: { color: string }) => (
<SirenIcon color={color} size={20} weight="bold" />
),
active_monitoring: ({ color }: { color: string }) => (
<DetectiveIcon color={color} />
),
};
const RiskStatusIconsTextColors: any = {
routine_monitoring: {
text: palette.filled.success,
background: palette.tag.success.bg,
},
alerted: { text: palette.warning.text, background: palette.tag.warning.bg },
active_monitoring: {
text: palette.tag.error.text,
background: palette.tag.error.bg,
},
};
type RiskStatusIconTextProp = {
riskStatusName: string;
isOnlyIcon?: boolean;
customStyle?: SxProps;
};
const RiskStatusIconText = ({
riskStatusName,
isOnlyIcon = true,
customStyle,
}: RiskStatusIconTextProp) => {
const { palette } = useAppTheme();
if (isOnlyIcon) {
return (
<>
{RiskStatusIcons[riskStatusName]({
color: palette.primitive?.neutral[70],
})}
</>
);
}
return (
<RiskStatusIconTextContainer
background={RiskStatusIconsTextColors[riskStatusName].background}
textColor={RiskStatusIconsTextColors[riskStatusName].text}
customStyle={customStyle}
>
{RiskStatusIcons[riskStatusName]({
color: RiskStatusIconsTextColors[riskStatusName].text,
})}
{RiskStatusName[riskStatusName]}
</RiskStatusIconTextContainer>
);
};
const RiskStatusIconTextContainer = styled(Stack)(
({ background, textColor, customStyle }: any) => ({
padding: "2px 16px",
borderRadius: "100px",
fontSize: 14,
lineHeight: "120%",
fontWeight: 400,
display: "flex",
flexDirection: "row",
alignItems: "flex-end",
justifyContent: "center",
textTransform: "capitalize",
gap: "8px",
backgroundColor: background,
color: textColor,
maxHeight: "22px",
...customStyle,
}),
);
const RiskStatusName: any = {
routine_monitoring: "Routine Monitoring",
alerted: "Alerted",
active_monitoring: "Active Monitoring",
};
export default RiskStatusIconText;
|