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 | import { TooltipProps } from "@common/Tooltip/Tooltip";
import { Badge, Box, styled } from "@mui/material";
import { Tooltip } from "@common/Tooltip";
import { Image } from "@common/StyledImage/Image";
type MerchantImageProps = {
src: string;
unread?: boolean;
height?: number;
width?: number;
isOrange?: boolean;
badgeTooltipProps?: Omit<TooltipProps, "children">;
};
export const MerchantImage = ({
src,
unread,
height = 40,
width = 40,
isOrange,
badgeTooltipProps,
}: MerchantImageProps) => {
const badgeContent = (
<Box
data-testid="merchant-img-badge"
style={{
width: "14px",
height: "14px",
border: "2px solid #F7F7F7",
borderRadius: "50%",
backgroundColor: isOrange ? "#FF8124" : "#6D9CF8",
}}
/>
);
return (
<CustomBadge
invisible={!unread}
overlap="circular"
badgeContent={
badgeTooltipProps ? (
<Tooltip {...badgeTooltipProps}>{badgeContent}</Tooltip>
) : (
badgeContent
)
}
>
<Image
height={height}
width={width}
sx={{
borderRadius: "3px",
}}
src={src}
/>
</CustomBadge>
);
};
const CustomBadge = styled(Badge)({
"& .MuiBadge-badge": {
borderRadius: "50%",
zIndex: 1,
padding: 0,
position: "absolute",
top: "0",
right: "0",
transform: "translate(50%, -50%)",
},
});
|