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 | 33x 55x 14x | import { addSizeToImage } from "@components/UploadAvatar/UploadAvatar";
import { Box, Stack } from "@mui/material";
import { ReactNode } from "react";
import AvatarPlaceholder from "@assets/images/avatar-placeholder.png";
const ImagesStacker = ({
data,
hasBorderedImages,
borderColor = "white",
borderWidth = 2,
condition,
renderAdditional,
imageWidth = 20,
onHandleImageClick,
}: {
data: string[];
hasBorderedImages?: boolean;
borderColor?: string;
borderWidth?: number;
condition?: boolean;
renderAdditional?: () => ReactNode;
imageWidth?: number;
onHandleImageClick?: () => void;
}) => {
return (
<Stack
direction="row"
spacing={-1.5}
sx={{ overflow: "hidden" }}
data-testid="Image-Stacker"
>
{data?.map((avatar, avatarIndex) => {
return (
<Box
key={avatarIndex}
onClick={(e) => {
e.stopPropagation();
onHandleImageClick?.();
}}
sx={{
width: `${imageWidth}px`,
height: `${imageWidth}px`,
borderRadius: "50%",
overflow: "hidden",
border: hasBorderedImages
? `${borderWidth}px solid ${borderColor}`
: "none",
}}
>
<img
src={avatar ? addSizeToImage(avatar, "small") : AvatarPlaceholder}
alt={`Avatar ${avatarIndex + 1}`}
width="100%"
height="100%"
style={{
objectFit: "cover",
}}
/>
</Box>
);
})}
{condition && renderAdditional && renderAdditional()}
</Stack>
);
};
export default ImagesStacker;
|