Joseph.Rawlings
7a089f53e2
- Changed badge, button, card, dropdown, input, modal, select, table, tabs, toggle, and tooltip components to align with the TailAdmin design system. - Updated class names and styles for consistency across components. - Enhanced accessibility and responsiveness in various components. - Improved hover and focus states for better user experience.
51 lines
1.5 KiB
PHP
51 lines
1.5 KiB
PHP
{{--
|
|
Table Header Cell Component - TailAdmin style
|
|
--}}
|
|
|
|
@props([
|
|
'align' => 'start',
|
|
'sortable' => false,
|
|
'sortKey' => null,
|
|
'currentSort' => null,
|
|
'currentDirection' => 'asc',
|
|
])
|
|
|
|
@php
|
|
$alignClasses = [
|
|
'start' => 'text-left',
|
|
'center' => 'text-center',
|
|
'end' => 'text-right',
|
|
];
|
|
$alignClass = $alignClasses[$align] ?? $alignClasses['start'];
|
|
|
|
$isSorted = $sortable && $sortKey === $currentSort;
|
|
@endphp
|
|
|
|
<th
|
|
{{ $attributes->class([
|
|
'px-5 py-3.5 text-theme-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400',
|
|
$alignClass,
|
|
'cursor-pointer select-none transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-300' => $sortable,
|
|
]) }}
|
|
@if($sortable && $sortKey)
|
|
wire:click="sort('{{ $sortKey }}')"
|
|
@endif
|
|
>
|
|
<div class="flex items-center gap-1.5 @if($align === 'end') justify-end @elseif($align === 'center') justify-center @endif">
|
|
<span>{{ $slot }}</span>
|
|
@if($sortable)
|
|
<span class="text-gray-400 dark:text-gray-500">
|
|
@if($isSorted)
|
|
@if($currentDirection === 'asc')
|
|
<x-ri-arrow-up-s-line class="size-4" />
|
|
@else
|
|
<x-ri-arrow-down-s-line class="size-4" />
|
|
@endif
|
|
@else
|
|
<x-ri-arrow-up-down-line class="size-3.5 opacity-50" />
|
|
@endif
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</th>
|