@liveblocks/react-ui/dist/components/internal/Avatar.cjs

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var cn = require('../../utils/cn.cjs');
var getInitials = require('../../utils/get-initials.cjs');
var useUserOrGroupInfo = require('../../utils/use-user-or-group-info.cjs');


function AvatarLayout({
  src,
  name,
  fallback,
  isLoading,
  className,
  ...props
}) {
  const nameInitials = react.useMemo(
    () => name ? getInitials.getInitials(name) : void 0,
    [name]
  );
  const fallbackInitials = react.useMemo(
    () => !isLoading && fallback && !name ? getInitials.getInitials(fallback) : void 0,
    [isLoading, fallback, name]
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: cn.cn("lb-avatar", className),
      "data-loading": isLoading ? "" : void 0,
      ...props,
      children: [
        src && /* @__PURE__ */ jsxRuntime.jsx("img", { className: "lb-avatar-image", src, alt: name }),
        nameInitials ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-avatar-fallback", "aria-hidden": true, children: nameInitials }) : fallbackInitials ? /* @__PURE__ */ jsxRuntime.jsx(
          "span",
          {
            className: "lb-avatar-fallback",
            "aria-label": fallback,
            title: fallback,
            children: fallbackInitials
          }
        ) : null
      ]
    }
  );
}
function Avatar({ userId, groupId, icon, ...props }) {
  const { info, isLoading } = useUserOrGroupInfo.useUserOrGroupInfo(
    userId ? "user" : "group",
    userId ?? groupId
  );
  return icon && (isLoading || !info?.avatar) ? /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(
    AvatarLayout,
    {
      src: info?.avatar,
      name: info?.name,
      fallback: userId ?? groupId,
      isLoading,
      ...props
    }
  );
}

exports.Avatar = Avatar;
//# sourceMappingURL=Avatar.cjs.map