@redocly/theme/lib/components/UserMenu/UserAvatar.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserAvatar = UserAvatar;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
function UserAvatar({ picture, className, height = 'var(--user-menu-navbar-button-height)', width = 'var(--user-menu-navbar-button-width)', }) {
    return (react_1.default.createElement(UserAvatarWrapper, { "data-component-name": "UserMenu/UserAvatar", className: className, height: height, width: width }, picture ? react_1.default.createElement("img", { src: picture, alt: "profile" }) : react_1.default.createElement(UserIcon_1.UserIcon, null)));
}
const UserAvatarWrapper = styled_components_1.default.div `
  width: ${({ width }) => width};
  height: ${({ height }) => height};
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
  user-select: none;

  font-family: var(--user-menu-avatar-font-family);
  font-size: var(--user-menu-avatar-font-size);
  line-height: var(--user-menu-avatar-line-height);
  font-weight: var(--user-menu-avatar-font-weight);

  border-radius: var(--user-menu-avatar-border-radius);
  background-color: var(--user-menu-avatar-bg-color);

  & > svg {
    width: ${({ width }) => `calc(${width} - 14px)`};
    height: ${({ height }) => `calc(${height} - 14px)`};
  }

  & > img {
    color: transparent;
    width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
    text-indent: 10000px;
  }
`;
//# sourceMappingURL=UserAvatar.js.map