Function

LearnerAvatar

LearnerAvatar(
    name: {
        name: string;
        avatar:
            | { kind: "initials" }
            | {
                kind: "illustration";
                id:
                    | "sun"
                    | "wave"
                    | "leaf"
                    | "plum"
                    | "ember"
                    | "echo"
                    | "night"
                    | "schwa";
            };
        size?: LearnerAvatarSize;
        className?: string;
    },
): Element
The learner's avatar: a circle showing their chosen illustration, or the initials of their name on the gold accent.
Parameters
- name: {
      name: string;
      avatar:
          | { kind: "initials" }
          | {
              kind: "illustration";
              id:
                  | "sun"
                  | "wave"
                  | "leaf"
                  | "plum"
                  | "ember"
                  | "echo"
                  | "night"
                  | "schwa";
          };
      size?: LearnerAvatarSize;
      className?: string;
  }
  The learner's name; initials are derived from it
Returns Element
Remarks
Anatomy follows shadcn's Avatar — a clipped circle with an image or a text fallback — without its image-loading state, because every illustration is inline SVG and never fails to load.

The circle is one img named after the learner, so the picture and the initials never announce themselves separately.

A blank name — a card still being filled in — shows ? and is announced simply as an avatar.
Example
```
<LearnerAvatar name="Ana García" avatar={{ kind: "illustration", id: "wave" }} size="sm" />
```
- Defined in components/learner-avatar/learner-avatar.tsx:46

LearnerAvatar

Parameters

Returns Element

Remarks

Example

Settings