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.
81 lines
2.8 KiB
PHP
81 lines
2.8 KiB
PHP
@props([
|
|
'striped' => false,
|
|
'hoverable' => true,
|
|
'compact' => false,
|
|
'responsive' => true,
|
|
'stickyHeader' => false,
|
|
'emptyMessage' => 'No data available',
|
|
'emptyIcon' => 'ri-inbox-line',
|
|
'loading' => false,
|
|
])
|
|
|
|
@php
|
|
// LucentUI table classes
|
|
$tableClasses = 'w-full text-sm text-left';
|
|
if ($striped) {
|
|
$tableClasses .= ' [&_tbody_tr:nth-child(even)]:bg-background-secondary/50';
|
|
}
|
|
if ($hoverable) {
|
|
$tableClasses .= ' [&_tbody_tr]:hover:bg-background-secondary/70 [&_tbody_tr]:transition-colors';
|
|
}
|
|
if ($compact) {
|
|
$tableClasses .= ' [&_th]:py-2 [&_td]:py-2';
|
|
} else {
|
|
$tableClasses .= ' [&_th]:py-3 [&_td]:py-3';
|
|
}
|
|
|
|
$wrapperClasses = 'bg-background border border-neutral rounded-lg shadow-sm';
|
|
|
|
if ($responsive) {
|
|
$wrapperClasses .= ' overflow-x-auto';
|
|
}
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
|
|
@if($loading)
|
|
<div class="flex flex-col items-center justify-center gap-3 p-8">
|
|
<x-ri-loader-5-fill class="size-8 animate-spin text-primary" />
|
|
<p class="text-sm text-base/60">Loading data...</p>
|
|
</div>
|
|
@else
|
|
<table class="{{ $tableClasses }}">
|
|
@if(isset($head))
|
|
<thead class="bg-background-secondary/50 border-b border-neutral text-xs uppercase text-base/60" @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
|
|
<tr>
|
|
{{ $head }}
|
|
</tr>
|
|
</thead>
|
|
@endif
|
|
|
|
@if(isset($body) && $body->isNotEmpty())
|
|
<tbody class="divide-y divide-neutral/50">
|
|
{{ $body }}
|
|
</tbody>
|
|
@elseif($slot->isNotEmpty())
|
|
<tbody class="divide-y divide-neutral/50">
|
|
{{ $slot }}
|
|
</tbody>
|
|
@else
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="100" class="px-5 py-12">
|
|
<div class="flex flex-col items-center justify-center gap-3 text-center">
|
|
<div class="flex items-center justify-center size-14 bg-background-secondary rounded-lg">
|
|
<x-dynamic-component :component="$emptyIcon" class="size-7 text-base/50" />
|
|
</div>
|
|
<p class="text-sm text-base/60">{{ $emptyMessage }}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
@endif
|
|
|
|
@if(isset($foot))
|
|
<tfoot class="bg-background-secondary/50 border-t border-neutral">
|
|
{{ $foot }}
|
|
</tfoot>
|
|
@endif
|
|
</table>
|
|
@endif
|
|
</div>
|