Develop the avatar component #67

[erenfn]

import React from 'react'; import PropTypes from 'prop-types'; import './AvatarStyles.css';

const Avatar = ({ src, alt, size }) => { return (

);}

Avatar.propTypes = { src: PropTypes.string.isRequired, alt: PropTypes.string.isRequired, size: PropTypes.oneOf(['small','medium', 'large']), className: PropTypes.string, };

export default Avatar;

[erenfn]

:root { --avatar-small: 24px; --avatar-medium: 40px; --avatar-large: 48px; --avatar-border-color: #000000; }

.avatar-container { display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; overflow: hidden; box-sizing: border-box; border-radius: 50%; margin-right: 10px; border: 0.5px solid #000000; object-fit: cover; }

.small { width: var(--avatar-small); height: var(--avatar-small); }

.medium { width: var(--avatar-medium); height: var(--avatar-medium); }

.large { width: var(--avatar-large); height: var(--avatar-large); }

.avatar-container.border { border: 0.5px solid var(--avatar-border-color); }

[erenfn]

It should be something like this, but without the :root in the css. Just replace the root constants with the actual values.

Also implement className propType properly. I would suggest using classnames library to do it.

How to use classNames: import classNames from 'classnames'; className={classNames(class1, class2)}

Then: class1 is avatar-container class2 is className propType we are using

FileUpload.jsx has a similar example