@props([ 
    'column', 
    'sortingEnabled' => true, 
    'sortable' => null, 
    'direction' => null, 
    'text' => null, 
]) 
 
@unless ($sortingEnabled && $sortable) 
    <th {{ $attributes->only('class') }}> 
        {{ $text ?? $slot }} 
    </th> 
@else 
    <th 
        wire:click="sortBy('{{ $column }}', '{{ $text ?? $column }}')" 
        {{ $attributes->only('class') }} 
        style="cursor:pointer;" 
    > 
        <div class="d-flex align-items-center"> 
            <span>{{ $text }}</span> 
 
            <span class="relative d-flex align-items-center"> 
                @if ($direction === 'asc') 
                    <svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /> 
                    </svg> 
                @elseif ($direction === 'desc') 
                    <svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> 
                    </svg> 
                @else 
                    <svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" /> 
                    </svg> 
                @endif 
            </span> 
        </div> 
    </th> 
@endif 
 
 |