Avatar Group

Build the stacked-avatar row you see on GitHub PRs and Google Docs: a handful of overlapping circular avatars, and when there are more people than fit, a trailing +K badge that stands in for the rest. It is a mostly presentational React component — the only real logic is slice the list to max, then count what is left over.

What you'll build

The starter App.tsx has the data (users, max, a palette, and an initials helper) and an empty .avatars row. Fill the row in:

1. Show the first max. Take users.slice(0, max) and render each as a circular .avatar showing that person's initials.
2. Colour by position. Give each avatar style={{ background: palette[i] }} so the row reads as distinct people.
3. Badge the rest. Compute overflow = users.length - max and, only when it is positive, render a trailing .more circle showing +{overflow}.

Examples

• Six users with max = 4 renders four avatars (AL, AT, GH, LT) then a +2 badge.
• If there were only three users, you would see three avatars and no badge (overflow is -1, not positive).
• The circles overlap by a fixed margin, and the first one sits flush with the left edge.

Notes

• Derive, don't duplicate. visible and overflow are computed from users and max; there is no separate state to keep in sync.
• The overlap is pure CSS. .avatar uses margin-left: -10px, and .avatars > :first-child resets it — you only render the circles in order.
• Only badge a positive overflow. When everyone fits, there is no +K circle at all.
• Styling (dark theme, circle size, overlap, badge colour) is already in styles.css; focus on the render.