Avatar Group code

@props([
    'avatars' => [],
    'size' => 'base',
    'max' => null,
])

@php
    /*
    | Overlapping stack of avatars with an optional "+N" overflow chip. Pass
    | `avatars` as an array of ['name' => ?string, 'src' => ?string] or compose
    | <x-ui.avatar> children directly in the slot.
    |
    | size: xs, sm, base, lg, xl, 2xl
    |
    | Usage:
    |   <x-ui.avatar-group :max="4" :avatars="[
    |       ['name' => 'Ada Lovelace'],
    |       ['name' => 'Grace Hopper'],
    |       ['src' => '/img/u.jpg'],
    |   ]" />
    */
    $items = collect($avatars);
    $limit = $max !== null ? (int) $max : $items->count();
    $shown = $items->take($limit);
    $overflow = max(0, $items->count() - $limit);

    $overflowSize = [
        'xs' => 'w-6 h-6 text-[10px]',
        'sm' => 'w-8 h-8 text-xs',
        'base' => 'w-10 h-10 text-sm',
        'lg' => 'w-12 h-12 text-base',
        'xl' => 'w-16 h-16 text-lg',
        '2xl' => 'w-20 h-20 text-2xl',
    ][$size] ?? 'w-10 h-10 text-sm';
@endphp

<div {{ $attributes->merge(['class' => 'flex items-center -space-x-3']) }}>
    @forelse ($shown as $avatar)
        <x-ui.avatar
            :name="$avatar['name'] ?? null"
            :src="$avatar['src'] ?? null"
            :size="$size"
        />
    @empty
        {{ $slot }}
    @endforelse

    @if ($overflow > 0)
        <span class="relative inline-flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 font-semibold text-gray-600 dark:text-gray-300 ring-2 ring-white dark:ring-gray-900 {{ $overflowSize }}">
            +{{ $overflow }}
        </span>
    @endif
</div>