I'm working on creating an avatar component with badges. However, I'm facing an issue with the positioning of the badges relative to the avatar size.
The image below provides a clear illustration of the problem. Can you guide me on adjusting the positioning to ensure it's correct irrespective of the avatar's size?
Here's the code I've implemented on codesandbox
Thank you for your assistance in advance.
https://i.sstatic.net/wiQxl.png
import React from "react";
import BadgeSvg from "./BadgeSvg";
import "./avatar.scss";
const Avatar = ({ size }) => {
const image = "https://i.imgur.com/pKHO357.png";
return (
<div>
<div className={`content-icon ${size}`}>
<img
src={image}
alt="Avatar Image"
className={`content-icon ${size}`}
/>
</div>
<div className="badge">
<BadgeSvg size={size} />
</div>
</div>
);
};
export default Avatar;.content-icon {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-shrink: 0;
border-radius: 50%;
background-color: #f2f2f2;
object-fit: cover;
color: #999999;
&.xsmall {
width: 16px;
height: 16px;
}
&.small {
width: 32px;
height: 32px;
}
&.medium {
width: 40px;
height: 40px;
}
&.large {
width: 72px;
height: 72px;
}
&.xlarge {
width: 96px;
height: 96px;
}
}
.badge {
position: relative;
top: -18px;
right: -52px;
display: flex;
width: min-content;
}