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 | 34x 1160x 1160x | import { Badge } from "@mui/material";
import { GiveTooltipProps } from "@shared/Tooltip/GiveTooltip.types";
import { styled } from "@theme/v2/Provider";
import GiveThumbnail, {
GiveThumbnailProps,
} from "@shared/Thumbnail/GiveThumbnail";
import CounterCircle from "@features/GiveConversation/components/CounterCircle";
type MainInfoImageProps = {
src: string;
unread?: boolean;
thumbnailSize?: GiveThumbnailProps["size"];
thumbnailType: GiveThumbnailProps["type"];
isOrange?: boolean;
badgeTooltipProps?: Omit<GiveTooltipProps, "children">;
id?: number;
};
const MainInfoImageNew = ({
src,
unread,
thumbnailType,
thumbnailSize,
id,
isOrange,
}: MainInfoImageProps) => {
return (
<CustomBadgeNew
invisible={!unread && !isOrange}
overlap="circular"
badgeContent={
<CounterCircle
variant={isOrange ? "tagged" : "reply"}
displayEmptyDot
testId={`merchants-${id}-merchant-replied-flag`}
/>
}
>
<GiveThumbnail imageUrl={src} size={thumbnailSize} type={thumbnailType} />
</CustomBadgeNew>
);
};
export const CustomBadgeNew = styled(Badge)(({ theme }) => ({
"& .MuiBadge-badge": {
borderRadius: "50%",
zIndex: 1,
padding: 0,
position: "absolute",
top: "0",
right: "0",
transform: "translate(35%, -35%)",
boxShadow: `0 0 0 2px ${theme.palette?.primitive?.neutral[0]}`,
},
}));
export default MainInfoImageNew;
|