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 87 88 89 90 91 92 93 94 95 96 97 98 | 33x 476x 476x 476x 33x 1636x 1636x 33x 751x 359x 33x | import { Badge, Box } from "@mui/material";
import { ChatCircleIcon } from "@phosphor-icons/react";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { GiveTooltipProps } from "@shared/Tooltip/GiveTooltip.types";
import { useAppTheme, styled } from "@theme/v2/Provider";
import GiveThumbnail, {
GiveThumbnailProps,
} from "@shared/Thumbnail/GiveThumbnail";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import MainInfoImageNew from "./MainInfoImageNew";
type MainInfoImageProps = {
src: string;
unread?: boolean;
thumbnailSize?: GiveThumbnailProps["size"];
thumbnailType: GiveThumbnailProps["type"];
isOrange?: boolean;
badgeTooltipProps?: Omit<GiveTooltipProps, "children">;
id?: number;
};
interface BadgeContentProps {
isOrange?: boolean;
}
const MainInfoImageOld = ({
src,
unread,
isOrange,
badgeTooltipProps,
thumbnailType,
thumbnailSize,
}: MainInfoImageProps) => {
const theme = useAppTheme();
const badgeContent = (
<BadgeContainer isOrange={isOrange}>
<ChatCircleIcon size={12} color={theme.palette.text.invert} weight="fill" />
</BadgeContainer>
);
return (
<CustomBadge
invisible={!unread}
overlap="circular"
badgeContent={
badgeTooltipProps ? (
<GiveTooltip {...badgeTooltipProps}>{badgeContent}</GiveTooltip>
) : (
badgeContent
)
}
>
<GiveThumbnail imageUrl={src} size={thumbnailSize} type={thumbnailType} />
</CustomBadge>
);
};
const MainInfoImage = (props: MainInfoImageProps) => {
const { isNewConversationsEnabled } = useGetFeatureFlagValues();
return isNewConversationsEnabled ? (
<MainInfoImageNew {...props} />
) : (
<MainInfoImageOld {...props} />
);
};
const BadgeContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== "isOrange",
})<BadgeContentProps>(({ isOrange, theme }) => ({
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "4px",
height: "20px",
borderRadius: "30px",
backgroundColor: isOrange
? theme.palette.primitive?.warning[50]
: theme.palette.primitive?.blue[50],
width: "20px",
padding: 0,
}));
const CustomBadge = styled(Badge)({
"& .MuiBadge-badge": {
borderRadius: "30px",
zIndex: 1,
padding: 0,
position: "absolute",
bottom: "0",
right: "0",
transform: "translate(35%, 70%)",
},
});
export default MainInfoImage;
|