design-system-simplefi
Version:
Design System for SimpleFi Applications
38 lines • 1.4 kB
JavaScript
var _a;
import React from 'react';
import { Avatar } from '../Avatar';
import { AvatarSize } from '../Avatar/Avatar.enums';
var SizeAvatar = (_a = {},
_a[AvatarSize.xl] = '70px',
_a[AvatarSize.lg] = '60px',
_a[AvatarSize.md] = '50px',
_a[AvatarSize.sm] = '40px',
_a);
var MultiAvatar = function (_a) {
var logos = _a.logos, _b = _a.size, size = _b === void 0 ? 'md' : _b, border = _a.border;
var renderAvatars = function () {
return logos.map(function (logo, index) {
var leftPosition = function (index) {
return index === 0 ? '' : -SizeAvatar[size].replace('px', '') / 3;
};
return (React.createElement(Avatar, { key: logo, border: border, logo: logo, size: size, style: {
zIndex: logos.length - index - 1,
position: 'relative',
top: '-50%',
left: leftPosition(index),
backgroundColor: 'white',
} }));
});
};
return (React.createElement("div", { style: {
width: 'fit-content',
height: 'min-content',
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
position: 'relative',
zIndex: 0,
} }, renderAvatars()));
};
export default MultiAvatar;
//# sourceMappingURL=MultiAvatar.js.map