@props(['letter', 'count'])

<a href="#letter-{{ strtolower($letter) }}" class="letter-link px-1 sm:px-3 py-2 rounded-lg hover:bg-gray-100 hover:text-blue-500 inline-flex items-center">
    <span class="text-lg font-semibold">{{ $letter }}</span>
    <span class="hidden sm:block ml-1 text-sm text-gray-500">({{ $count }})</span>
</a>