components/avatar/avatar.react.tsx

Functions

Imports

It imports components/avatar/avatar.ts. No module of this repo imports it.

Source

1import { useState, type ReactNode } from "react";
2import { initials } from "./avatar.ts";
3
4export interface AvatarProps {
5  // The person, agent or source. Always given: it names the avatar for a screen reader
6  // when the picture or the initials stand alone.
7  name: string;
8  // A picture; the initials show when there is none or it fails to load.
9  src?: string;
10  // Override the initials ("AI" for an agent).
11  fallback?: string;
12  size?: "sm" | "default" | "lg";
13  shape?: "circle" | "square";
14  // "ai" sets the initials in the mono face.
15  kind?: "person" | "ai";
16  // A corner badge: a glyph, or a letter, never colour alone. Give it a `badgeLabel`.
17  badge?: ReactNode;
18  badgeLabel?: string;
19  badgeTone?: "ok" | "crit" | "nodata";
20}
21
22export function Avatar({ name, src, fallback, size = "default", shape = "circle", kind = "person", badge, badgeLabel, badgeTone }: AvatarProps) {
23  const [failed, setFailed] = useState(false);
24  return (
25    <span className="cap-avatar" role="img" aria-label={badge != null && badgeLabel ? `${name}, ${badgeLabel}` : name} data-size={size === "default" ? undefined : size} data-shape={shape === "square" ? "square" : undefined} data-kind={kind === "ai" ? "ai" : undefined} data-state={failed ? "error" : undefined}>
26      <span className="cap-avatar-fallback" aria-hidden="true">
27        {fallback ?? initials(name)}
28      </span>
29      {src && !failed ? <img className="cap-avatar-image" src={src} alt="" onError={() => setFailed(true)} /> : null}
30      {badge != null ? (
31        <span className="cap-avatar-badge" data-tone={badgeTone} aria-hidden="true">
32          {badge}
33        </span>
34      ) : null}
35    </span>
36  );
37}
38
39export function AvatarGroup({ label, children, extra }: { label: string; children: ReactNode; extra?: number }) {
40  return (
41    <span className="cap-avatar-group" role="group" aria-label={label}>
42      {children}
43      {extra ? (
44        <span className="cap-avatar-count" role="img" aria-label={`and ${extra} more`}>
45          +{extra}
46        </span>
47      ) : null}
48    </span>
49  );
50}