gab-social/app/javascript/gabsocial/components/avatar_group.js

62 lines
1.5 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import Image from './image'
/**
* Renders an avatar component
* @param {list} [props.accounts] - the accounts for images
* @param {number} [props.size=40] - the size of the avatar
*/
class AvatarGroup extends ImmutablePureComponent {
render() {
const { accounts, size } = this.props
return (
<div className={[_s.d].join(' ')}>
{
!!accounts &&
accounts.map((account) => {
const isPro = account.get('is_pro')
const alt = `${account.get('display_name')} ${isPro ? '(PRO)' : ''}`.trim()
const className = [_s.d, _s.circle, _s.overflowHidden]
if (isPro) {
className.push(_s.boxShadowAvatarPro)
}
const options = {
alt,
className,
src: account.get('avatar_static'),
style: {
width: `${size}px`,
height: `${size}px`,
},
}
return (
<div className={[_s.d].join(' ')}>
<Image {...options} />
</div>
)
})
}
</div>
)
}
}
AvatarGroup.propTypes = {
accounts: ImmutablePropTypes.list,
size: PropTypes.number,
}
AvatarGroup.defaultProps = {
size: 40,
}
export default AvatarGroup