2022-12-10 12:14:48 +03:00
|
|
|
import './avatar.css';
|
|
|
|
|
|
|
|
const SIZES = {
|
|
|
|
s: 16,
|
|
|
|
m: 20,
|
|
|
|
l: 24,
|
|
|
|
xl: 32,
|
|
|
|
xxl: 50,
|
2022-12-17 19:38:19 +03:00
|
|
|
xxxl: 64,
|
2022-12-10 12:14:48 +03:00
|
|
|
};
|
|
|
|
|
2022-12-16 08:27:04 +03:00
|
|
|
function Avatar({ url, size, alt = '' }) {
|
2022-12-10 12:14:48 +03:00
|
|
|
size = SIZES[size] || size || SIZES.m;
|
|
|
|
return (
|
|
|
|
<span
|
|
|
|
class="avatar"
|
|
|
|
style={{
|
|
|
|
width: size,
|
|
|
|
height: size,
|
|
|
|
}}
|
2022-12-14 17:46:50 +03:00
|
|
|
title={alt}
|
2022-12-10 12:14:48 +03:00
|
|
|
>
|
|
|
|
{!!url && (
|
|
|
|
<img src={url} width={size} height={size} alt={alt} loading="lazy" />
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
);
|
2022-12-16 08:27:04 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Avatar;
|