ProfileImage.jsx

import styled from 'styled-components';
import PropTypes from 'prop-types';
import { Link } from '../pages/routes';

const ProfileImageElement = styled.div`
	border-radius: 100%;
	width: ${props => props.width || '75px'};
	height: ${props => props.width || '75px'};
	background-image: url(${props => props.src || '/static/userIcon.png'});
	background-size: cover;
	background-color: #FFF;
`;

const ProfileImage = ({profileLink, src, ...other}) => {
	const RenderedProfileImage = <ProfileImageElement src={src} />;

	return profileLink ? (
		<Link href={profileLink}>
			<a>{ProfileImageElement}</a>
		</Link>
	):
	RenderedProfileImage;
};

ProfileImage.propTypes = {
	src: PropTypes.string,
	profileLink: PropTypes.string,
	width: PropTypes.string,
};

export default ProfileImage;