@props([
    'src' => '',
    'name' => ''
])

<div class="group relative flex items-center justify-center size-9 rounded-full
    bg-white dark:bg-gray-800 ring-2 ring-white dark:ring-[#1a1616]
    hover:ring-primary hover:z-10 transition-all cursor-pointer">

    <div class="size-full rounded-full bg-cover bg-center"
        style="background-image: url('{{ $src }}')">
    </div>

    <div class="hidden group-hover:block absolute -bottom-8 bg-black text-white
        text-xs px-2 py-1 rounded whitespace-nowrap z-50">
        {{ $name }}
    </div>

</div>