glide-design-system/src/lib/components/avatar/Avatar.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import PropTypes from "prop-types";
import defaultProfile from "../../assests/person.png";

/**
 * Avatar component
 * @param {*} label The content to be displayed inside the avatar
 * @param {*} onClick  A function to be called when the avatar is clicked. It is typically used to handle click events on the avatar.
 * @param {*} style An object containing custom styles to be applied to the container of the avatar.
 */
export const Avatar = ({ label, onClick, style, className, name, id }) => {
  const combinedStyle = { ...style };
  return (
    <div
      id={id}
      data-testid={id}
      name={name}
      className={`avatar ${className ? className : ""}`}
      style={combinedStyle}
      onClick={(e) => onClick && onClick(e)}
    >
      {label == (undefined || null) ? (
        <span className="material-symbols-outlined">person</span>
      ) : (
        label
      )}
    </div>
  );
};

Avatar.propTypes = {
  label: PropTypes.string,
  onClick: PropTypes.func,
  size: PropTypes.oneOf(["small", "medium", "large"]),
};