@twa-dev/mark42/dist/Components/InitialsAvatar/InitialsAvatar.js

Mark42 is a simple lightweight tree-shakable UI library for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps).

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["size", "entityId", "entityName", "theme", "className", "style"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import cx from "classnames";
import { memo } from "react";
import { useTheme } from "../../hooks/useTheme";
import styles from "./InitialsAvatar.styles";
import { Avatar } from "../Avatar";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
var bgColors = [["#e17076", "#ff885e", "#ff516a"], // red
["#faa774", "#ffcd6a", "#ffa85c"], // orange
["#a695e7", "#82b1ff", "#665fff"], // purple
["#7bc862", "#a0de7e", "#54cb68"], // green
["#6ec9cb", "#53edd6", "#28c9b7"], // cyan
["#65aadd", "#72d5fd", "#2a9ef1"], // blue
["#ee7aae", "#e0a2f3", "#d669ed"] // pink
];
export var InitialsAvatar = /*#__PURE__*/memo(function (_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 40 : _ref$size,
      entityId = _ref.entityId,
      entityName = _ref.entityName,
      theme = _ref.theme,
      className = _ref.className,
      style = _ref.style,
      restProps = _objectWithoutProperties(_ref, _excluded);

  theme = useTheme(theme);
  var bgIndex = entityId % 7;

  var _bgColors$bgIndex = _slicedToArray(bgColors[bgIndex], 3),
      color = _bgColors$bgIndex[0],
      topColor = _bgColors$bgIndex[1],
      bottomColor = _bgColors$bgIndex[2];

  var _entityName$split = entityName.split(" "),
      _entityName$split2 = _slicedToArray(_entityName$split, 2),
      _entityName$split2$ = _entityName$split2[0],
      firstName = _entityName$split2$ === void 0 ? "" : _entityName$split2$,
      _entityName$split2$2 = _entityName$split2[1],
      lastName = _entityName$split2$2 === void 0 ? "" : _entityName$split2$2;

  return /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, restProps), {}, {
    size: size,
    className: cx(className, styles.root, styles[theme]),
    style: _objectSpread(_objectSpread({}, style), {}, {
      background: theme === "apple" ? "linear-gradient(180deg, ".concat(topColor, " 0%, ").concat(bottomColor, " 100%)") : color,
      fontSize: Math.round(size / 2.2)
    }),
    children: /*#__PURE__*/_jsxs("div", {
      children: [firstName && firstName.charAt(0).toUpperCase(), lastName && lastName.charAt(0).toUpperCase()]
    })
  }));
});
InitialsAvatar.defaultProps = {
  size: 40
};
InitialsAvatar.displayName = "InitialsAvatar";