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 | import { palette } from "@palette";
import { styled, Box, BoxProps } from "@mui/material";
import { Text } from "@common/Text";
import { ITextProps } from "@common/Text/Text";
export type BankAccountTagType =
| "approved"
| "pending"
| "upload"
| "declined"
| "update_requested";
const getColorsMap = (type: BankAccountTagType, filled: boolean) => {
const colorsMap = {
approved: filled ? palette.warning.light : palette.tag.success.hover,
upload: filled ? palette.warning.light : palette.tag.warning.hover,
update_requested: filled
? palette.warning.light
: palette.tag.warning.hover,
declined: filled ? palette.error.light : palette.tag.error.hover,
pending: filled ? palette.error.light : palette.neutral[80],
};
return colorsMap[type];
};
interface Props extends BoxProps {
type: BankAccountTagType;
filled?: boolean;
isTextCenter?: boolean;
active?: boolean;
textProps?: ITextProps;
}
export const BankAccountTag = ({
type,
filled = false,
isTextCenter = true,
sx,
active = true,
textProps,
...rest
}: Props) => {
const color = getColorsMap(type, filled);
return (
<Container
sx={{
backgroundColor: active ? bgMap[type] : "#EBEBEB",
cursor: active ? "default" : "pointer",
...sx,
}}
{...rest}
>
<Text
color={active ? color : palette.black[100]}
variant="body"
textTransform="capitalize"
width="100%"
textAlign={isTextCenter ? "center" : "left"}
fontSize="12px"
{...textProps}
>
{type?.replace("_", " ")}
</Text>
</Container>
);
};
const Container = styled(Box)({
gap: "2px",
display: "flex",
borderRadius: "4px",
alignItems: "center",
padding: "2px 8px",
userSelect: "none",
});
const bgMap = {
approved: { backgroundColor: palette.tag.success.bg },
upload: { backgroundColor: palette.tag.warning.bg },
update_requested: { backgroundColor: palette.tag.warning.bg },
declined: { backgroundColor: palette.tag.error.bg },
pending: { backgroundColor: "#EBEBEB" },
};
|