@props(['field', 'sort', 'sort_field'])

<a class=" flex items-center justify-center w-full hover:underline" href="" wire:click.prevent="sortable('{{ $sort_field }}')">
   {{ $slot }}
    @if($sort == 'DESC' && $sort_field == $field)
    <svg class="text-xs mx-1 w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
    </svg>
    @else
    <svg class="text-xs mx-1 w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
      </svg>                                  
    @endif                              
</a>