fallback-avatar-hex/dist/index.modern.js

A hexagonal fallback avatar component for users without profile photos. Users without avatars or profile photos will dynamically have the first letters of their names, capitalized, and set as their default avatar(s) with unique back ground color(s).

import React from 'react';

var generateAvatarText = function generateAvatarText(name) {
  var _name$charAt;
  return name === null || name === void 0 ? void 0 : (_name$charAt = name.charAt(0)) === null || _name$charAt === void 0 ? void 0 : _name$charAt.toUpperCase();
};
var generateColorFromName = function generateColorFromName(name) {
  var hash = 5381;
  for (var i = 0; i < (name === null || name === void 0 ? void 0 : name.length); i++) {
    hash = hash * 33 + (name === null || name === void 0 ? void 0 : name.charCodeAt(i));
  }
  var r = (hash & 0xFF0000) >> 16;
  var g = (hash & 0x00FF00) >> 8;
  var b = hash & 0x0000FF;
  return "rgb(" + r + ", " + g + ", " + b + ")";
};
var generateAvatarColor = function generateAvatarColor(name) {
  var truncatedName = name === null || name === void 0 ? void 0 : name.slice(0, 3);
  return generateColorFromName(truncatedName);
};
var FallbackAvatarHex = function FallbackAvatarHex(_ref) {
  var text = _ref.text,
    size = _ref.size;
  var avatarText = generateAvatarText(text);
  var backgroundColor = generateAvatarColor(text);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      backgroundColor: text === 'r' ? '#6867FF' : backgroundColor,
      color: '#FFFFFF',
      width: size + "rem",
      height: size + "rem",
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: size / 2 + "rem",
      fontWeight: 'bold',
      textTransform: 'uppercase',
      clipPath: 'polygon(50% 0, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%)'
    }
  }, avatarText);
};

export default FallbackAvatarHex;
//# sourceMappingURL=index.modern.js.map