Groups

import { createAvatarGroup } from "@reuse-sh/avatars";

// Children with data-reuse-avatar are overlapped and cut.
// The last one carries a count badge for everyone not shown.
const group = createAvatarGroup(document.querySelector(".project-people"), {
  overlap: 10,
  clearance: 2,
});

import { Avatar, AvatarGroup } from "@reuse-sh/avatars/react";

export function ProjectPeople({ people, shown = 4 }) {
  const rest = people.length - shown;
  return (
    <AvatarGroup overlap={10}>
      {people.slice(0, shown).map((person, index) => (
        <Avatar
          key={person.id}
          name={person.name}
          src={person.photo}
          size={32}
          badge={rest > 0 && index === shown - 1
            ? { type: "count", count: rest, label: `and ${rest} more` }
            : undefined}
        />
      ))}
    </AvatarGroup>
  );
}