@liveblocks/react-ui
Version:
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.
1 lines • 1.99 kB
Source Map (JSON)
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useUser } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\nimport { getInitials } from \"../../utils/get-initials\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n /**\n * The user ID to display the avatar for.\n */\n userId: string;\n}\n\nexport function Avatar({ userId, className, ...props }: AvatarProps) {\n const { user, isLoading } = useUser(userId);\n const resolvedUserName = useMemo(() => user?.name, [user]);\n const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);\n const resolvedUserInitials = useMemo(\n () => (resolvedUserName ? getInitials(resolvedUserName) : undefined),\n [resolvedUserName]\n );\n const resolvedUserIdInitials = useMemo(\n () => (!isLoading && !user ? getInitials(userId) : undefined),\n [isLoading, user, userId]\n );\n\n return (\n <div\n className={classNames(\"lb-avatar\", className)}\n data-loading={isLoading ? \"\" : undefined}\n {...props}\n >\n {resolvedUserAvatar && (\n <img\n className=\"lb-avatar-image\"\n src={resolvedUserAvatar}\n alt={resolvedUserName}\n />\n )}\n {resolvedUserInitials ? (\n <span className=\"lb-avatar-fallback\" aria-hidden>\n {resolvedUserInitials}\n </span>\n ) : resolvedUserIdInitials ? (\n <span className=\"lb-avatar-fallback\" aria-label={userId} title={userId}>\n {resolvedUserIdInitials}\n </span>\n ) : null}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAgBO;AACL;AACA;AACA;AACA;AAA6B;AAC+B;AACzC;AAEnB;AAA+B;AACsB;AAC3B;AAG1B;AACG;AAC6C;AACb;AAC3B;AAEH;AACE;AACW;AACL;AACA;AACP;AAGC;AAAe;AAAgC;AAC7C;AAGF;AAAe;AAAiC;AAAe;AAC7D;AAED;AAAA;AAGV;;"}