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 | 51x 192x 192x 51x 192x 192x 192x 192x 192x | import { Stack } from "@mui/material";
import { memo } from "react";
import { CheckCircleIcon, ProhibitIcon, WarningCircleIcon } from "@phosphor-icons/react";
import { useAppTheme } from "@theme/v2/Provider";
import GiveText from "@shared/Text/GiveText";
export type TRiskLevel = "normal" | "high" | "restricted";
type Props = {
riskLevelName?: TRiskLevel | null;
};
const getRiskLevelData = (palette: any) => {
const riskLevelColors = {
success1: palette.primitive?.success[100],
warning: palette.primitive?.warning[100],
error1: palette.primitive?.error[100],
};
return {
normal: {
label: "Normal",
color: "success1",
icon: <CheckCircleIcon size={18} color={riskLevelColors.success1} />,
},
high: {
label: "High",
color: "warning",
icon: <WarningCircleIcon size={18} color={riskLevelColors.warning} />,
},
restricted: {
label: "Restricted",
color: "error1",
icon: <ProhibitIcon size={18} color={riskLevelColors.error1} />,
},
} as const;
};
const RiskStatusChip = ({ riskLevelName }: Props) => {
const { palette } = useAppTheme();
const riskLevelStatus = getRiskLevelData(palette);
Iif (!riskLevelName) return <GiveText variant="bodyXS">Not Assigned</GiveText>;
const { color, label, icon } = riskLevelStatus[riskLevelName as TRiskLevel];
return (
<Stack component="span" direction="row" alignItems="center" gap="4px">
{icon}
<GiveText component="span" variant="bodyXS" color={color}>
{label}
</GiveText>
</Stack>
);
};
export default memo(RiskStatusChip);
|