@activecollab/components/dist/esm/presentation/shared/RoundAvatar.js

ActiveCollab Components

import styled from "styled-components";

/**
 * A simple round initials avatar used across the presentation mock-ups in
 * place of real user images. `$overlap` makes stacked avatars overlap (task
 * rows / cards), `$bordered` draws the paper-coloured ring that separates
 * overlapping avatars.
 */
export const RoundAvatar = styled.div.withConfig({
  displayName: "RoundAvatar",
  componentId: "sc-1s5jx6y-0"
})(["width:", "px;height:", "px;border-radius:50%;background-color:", ";color:#fff;display:flex;align-items:center;justify-content:center;font-size:", "px;font-weight:700;flex-shrink:0;", " &:not(:first-child){margin-left:", ";}"], props => {
  var _props$$size;
  return (_props$$size = props.$size) != null ? _props$$size : 28;
}, props => {
  var _props$$size2;
  return (_props$$size2 = props.$size) != null ? _props$$size2 : 28;
}, props => props.$bg, props => {
  var _props$$size3;
  const size = (_props$$size3 = props.$size) != null ? _props$$size3 : 28;
  if (size <= 22) return 9;
  if (size <= 26) return 10;
  return 11;
}, props => props.$bordered === false ? "" : "border: 2px solid var(--page-paper-main);", props => props.$overlap ? "-8px" : "0");
RoundAvatar.displayName = "RoundAvatar";
//# sourceMappingURL=RoundAvatar.js.map