@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('@liveblocks/react');
var react$1 = require('react');
var classNames = require('../../utils/class-names.cjs');
var getInitials = require('../../utils/get-initials.cjs');


function Avatar({ userId, className, ...props }) {
  const { user, isLoading } = react.useUser(userId);
  const resolvedUserName = react$1.useMemo(() => user?.name, [user]);
  const resolvedUserAvatar = react$1.useMemo(() => user?.avatar, [user]);
  const resolvedUserInitials = react$1.useMemo(
    () => resolvedUserName ? getInitials.getInitials(resolvedUserName) : void 0,
    [resolvedUserName]
  );
  const resolvedUserIdInitials = react$1.useMemo(
    () => !isLoading && !user ? getInitials.getInitials(userId) : void 0,
    [isLoading, user, userId]
  );
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
    className: classNames.classNames("lb-avatar", className),
    "data-loading": isLoading ? "" : void 0,
    ...props,
    children: [
      resolvedUserAvatar && /* @__PURE__ */ jsxRuntime.jsx("img", {
        className: "lb-avatar-image",
        src: resolvedUserAvatar,
        alt: resolvedUserName
      }),
      resolvedUserInitials ? /* @__PURE__ */ jsxRuntime.jsx("span", {
        className: "lb-avatar-fallback",
        "aria-hidden": true,
        children: resolvedUserInitials
      }) : resolvedUserIdInitials ? /* @__PURE__ */ jsxRuntime.jsx("span", {
        className: "lb-avatar-fallback",
        "aria-label": userId,
        title: userId,
        children: resolvedUserIdInitials
      }) : null
    ]
  });
}

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