metamask-extension/ui/components/component-library/avatar-with-badge/avatar-with-badge.js

import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Box from '../../ui/box/box';
import { BADGE_POSITIONS } from './avatar-with-badge.constants';

export const AvatarWithBadge = ({
  children,
  badgePosition,
  className,
  badge,
  badgeWrapperProps,
  ...props
}) => {
  return (
    <Box className={classnames('avatar-with-badge', className)} {...props}>
      {/* Generally the AvatarAccount */}
      {children}
      <Box
        className={
          badgePosition === 'top'
            ? 'avatar-with-badge__badge-wrapper--position-top'
            : 'avatar-with-badge__badge-wrapper--position-bottom'
        }
        {...badgeWrapperProps}
      >
        {/* Generally the AvatarNetwork at SIZES.XS */}
        {badge}
      </Box>
    </Box>
  );
};

AvatarWithBadge.propTypes = {
  /**
   * The position of the Badge
   * Possible values could be 'top', 'bottom',
   */
  badgePosition: PropTypes.oneOf(Object.values(BADGE_POSITIONS)),
  /**
   * The Badge Wrapper props of the component. All Box props can be used
   */
  badgeWrapperProps: PropTypes.shape(Box.PropTypes),
  /**
   * The children to be rendered inside the AvatarWithBadge
   */
  children: PropTypes.node,
  /**
   * The badge to be rendered inside the AvatarWithBadge
   */
  badge: PropTypes.object,
  /**
   * Add custom css class
   */
  className: PropTypes.string,
};