export default function AvatarStack()

in src/avatar-stack/avatar-stack.tsx [23:71]

• 48 lines of code
• 2 McCabe index (conditional complexity)

export default function AvatarStack({
  children,
  className,
  size = Size.Size20,
  extraItems,
  dropdownMenuProps,
  ...restProps
}: AvatarProps) {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  return (
    <div
      className={classNames(styles.avatarStack, className, styles[`size${size}`], {
        [styles.hovered]: dropdownOpen,
      })}
      {...restProps}
      style={{height: size, ...restProps.style}}
    >
      {Children.map(children, (child, index) => (
        <div className={styles.item} style={{'--ring-avatar-stack-index': index}}>
          {child}
        </div>
      ))}
      {extraItems?.length ? (
        <DropdownMenu
          hoverMode
          hoverShowTimeOut={10}
          onShow={() => setDropdownOpen(true)}
          onHide={() => setDropdownOpen(false)}
          className={styles.extra}
          style={{
            width: size,
            height: size,
            '--ring-avatar-stack-index': Children.count(children),
            fontSize: fontSizes[size],
          }}
          anchor={(
            <button type='button' className={styles.extraButton}>
              <Avatar size={size} info={<span className={styles.extraText}>{`+${extraItems.length}`}</span>} />
            </button>
          )}
          data={extraItems}
          menuProps={{offset: 4, ...dropdownMenuProps?.menuProps}}
          {...dropdownMenuProps}
        />
      ) : null}
    </div>
  );
}