sigit.io/src/components/UserAvatarGroup/index.tsx

import { Children, PropsWithChildren } from 'react'

import styles from './style.module.scss'

interface UserAvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  max: number
  renderSurplus?: ((surplus: number) => React.ReactNode) | undefined
}

const defaultSurplus = (surplus: number) => {
  return <span className={styles.icon}>+{surplus}</span>
}

/**
 * Renders children with the `max` limit (including surplus if available).
 * The children are wrapped with a `div` (accepts standard `HTMLDivElement` attributes)
 * @param max The maximum number of children rendered in a div.
 * @param renderSurplus Custom render for surplus children (accepts surplus number).
 */
export const UserAvatarGroup = ({
  max,
  renderSurplus = defaultSurplus,
  children,
  ...rest
}: PropsWithChildren<UserAvatarGroupProps>) => {
  const total = Children.count(children)
  const surplus = total - max + 1

  const childrenArray = Children.toArray(children)
  return (
    <div className={styles.container} {...rest}>
      {surplus > 1
        ? childrenArray.slice(0, surplus * -1).map((c) => c)
        : children}
      {surplus > 1 && renderSurplus(surplus)}
    </div>
  )
}