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 | 68x 68x 68x 68x 68x | import { Text } from "@common/Text";
import { palette } from "@palette";
import { Stack, styled } from "@mui/material";
import { memo } from "react";
import {
CheckCircleIcon,
ProhibitIcon,
WarningCircleIcon,
} from "@phosphor-icons/react";
export type TRiskLevelName = "normal" | "high" | "restricted";
type Props = {
riskLevelName?: string | null;
};
const RiskStatusChip = ({ riskLevelName }: Props) => {
if (!isValidRiskLevelName(riskLevelName))
return <StyledText>Not Assigned</StyledText>;
const { color, label, icon } =
merchantRiskStatus[riskLevelName as TRiskLevelName];
return (
<Stack component="span" direction="row" alignItems="center" gap="4px">
{icon}
<StyledText component="span" color={color}>
{label}
</StyledText>
</Stack>
);
};
type StatusObject = { label: string; color: string; icon: JSX.Element };
const colors = {
green: palette.tag.success.text,
orange: palette.tag.warning.hover,
red: palette.error.hover,
};
const merchantRiskStatus: Record<TRiskLevelName, StatusObject> = {
normal: {
label: "Normal",
color: colors.green,
icon: <CheckCircleIcon weight="duotone" size={18} color={colors.green} />,
},
high: {
label: "High",
color: colors.orange,
icon: (
<WarningCircleIcon weight="duotone" size={18} color={colors.orange} />
),
},
restricted: {
label: "Restricted",
color: colors.red,
icon: <ProhibitIcon weight="duotone" size={18} color={colors.red} />,
},
};
const StyledText = styled(Text)<{ color?: string }>(({ color }) => ({
fontSize: "12px",
lineHeight: "14.4px",
color: color || palette.neutral[80],
}));
export default memo(RiskStatusChip);
export const isValidRiskLevelName = (value: any) => {
return Object.keys(merchantRiskStatus).includes(value);
};
|