{{--
    テーブル内ソート項目タイトルを生成する
    @props key ソート項目キー
    @props text 項目タイトル
--}}
@props(['key', 'text'=>null])
<div class=" flex items-center justify-between">
    <a href="javascript:void(0)" class="flex-1 text-center"
        wire:click="sort('{{$key}}')">{{$text?? $slot}}</a>
    <span>
        @if($sortKey == $key && $sortType == 'asc')
        <i class="fa-solid fa-caret-up"></i>
        @endif
        @if($sortKey == $key && $sortType == 'desc')
        <i class="fa-solid fa-caret-down" ></i>
        @endif
    </span>
</div>