45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Image } from '@freecodecamp/react-bootstrap';
|
|
import DefaultAvatar from '../../assets/icons/DefaultAvatar';
|
|
import { defaultUserImage } from '../../../../config/misc';
|
|
|
|
const propTypes = {
|
|
isDonating: PropTypes.bool,
|
|
isTopContributor: PropTypes.bool,
|
|
picture: PropTypes.any.isRequired,
|
|
userName: PropTypes.string.isRequired
|
|
};
|
|
|
|
function borderColorPicker(isDonating, isTopContributor) {
|
|
if (isDonating && isTopContributor) return 'purple-border';
|
|
else if (isTopContributor) return 'green-border';
|
|
else if (isDonating) return 'gold-border';
|
|
else return 'default-border';
|
|
}
|
|
|
|
function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
|
|
let borderColor = borderColorPicker(isDonating, isTopContributor);
|
|
let isPlaceHolderImage =
|
|
/example.com|identicon.org/.test(picture) || picture === defaultUserImage;
|
|
|
|
return (
|
|
<div className={`avatar-container ${borderColor}`}>
|
|
{isPlaceHolderImage ? (
|
|
<DefaultAvatar className='avatar default-avatar' />
|
|
) : (
|
|
<Image
|
|
alt={userName + "'s avatar"}
|
|
className='avatar'
|
|
responsive={true}
|
|
src={picture}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
AvatarRenderer.propTypes = propTypes;
|
|
AvatarRenderer.displayName = 'AvatarRenderer';
|
|
export default AvatarRenderer;
|