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

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";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { cn } from '../../utils/cn.js';
import { getInitials } from '../../utils/get-initials.js';
import { useUserOrGroupInfo } from '../../utils/use-user-or-group-info.js';


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

export { Avatar };
//# sourceMappingURL=Avatar.js.map