Joseph.Rawlings
abff5a381f
- Updated tab-panel component to use Tailwind for styling and transitions. - Refactored table-row component to implement Tailwind classes for hover effects and borders. - Converted table-td component to utilize Tailwind for alignment and text styles. - Changed table-th component to apply Tailwind for header styling and sorting indicators. - Revised table component to adopt Tailwind for layout, borders, and responsive design. - Enhanced tabs component with Tailwind for navigation styles and transitions. - Updated toggle component to use Tailwind for switch styles and accessibility. - Refactored tooltip component to implement Tailwind for positioning and styling. - Added visual enhancements to app.css for improved UI interactions and animations.
57 lines
1.8 KiB
PHP
57 lines
1.8 KiB
PHP
{{--
|
|
Table Header Cell Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
--}}
|
|
|
|
@props([
|
|
'align' => 'start',
|
|
'sortable' => false,
|
|
'sortKey' => null,
|
|
'currentSort' => null,
|
|
'currentDirection' => 'asc',
|
|
])
|
|
|
|
@php
|
|
$alignClasses = [
|
|
'start' => 'text-left justify-start',
|
|
'center' => 'text-center justify-center',
|
|
'end' => 'text-right justify-end',
|
|
];
|
|
$alignClass = $alignClasses[$align] ?? $alignClasses['start'];
|
|
|
|
$isSorted = $sortable && $sortKey === $currentSort;
|
|
|
|
$baseClasses = 'px-5 py-3.5 text-xs font-semibold uppercase tracking-wider text-secondary dark:text-gray-400 bg-transparent align-middle whitespace-nowrap';
|
|
$sortableClasses = $sortable ? 'cursor-pointer select-none transition-colors duration-200 hover:text-primary dark:hover:text-primary' : '';
|
|
$sortedClasses = $isSorted ? 'text-primary dark:text-primary' : '';
|
|
@endphp
|
|
|
|
<th
|
|
{{ $attributes->class([
|
|
$baseClasses,
|
|
$alignClass,
|
|
$sortableClasses,
|
|
$sortedClasses,
|
|
]) }}
|
|
@if($sortable && $sortKey)
|
|
wire:click="sort('{{ $sortKey }}')"
|
|
@endif
|
|
>
|
|
<div class="flex items-center gap-1.5 {{ $alignClass }}">
|
|
<span>{{ $slot }}</span>
|
|
@if($sortable)
|
|
<span class="inline-flex {{ $isSorted ? 'text-primary' : 'text-secondary/50 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>
|