- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
68 lines
2.4 KiB
PHP
68 lines
2.4 KiB
PHP
@props([
|
|
'striped' => false,
|
|
'hoverable' => true,
|
|
'compact' => false,
|
|
'responsive' => true,
|
|
'stickyHeader' => false,
|
|
'emptyMessage' => 'No data available',
|
|
'emptyIcon' => 'ri-inbox-line',
|
|
'loading' => false,
|
|
])
|
|
|
|
@php
|
|
$tableClasses = 'w-full text-left';
|
|
$wrapperClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm overflow-hidden';
|
|
|
|
if ($responsive) {
|
|
$wrapperClasses .= ' overflow-x-auto';
|
|
}
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
|
|
@if($loading)
|
|
<div class="p-8 flex flex-col items-center justify-center gap-3">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
<p class="text-sm text-base/60">Loading data...</p>
|
|
</div>
|
|
@else
|
|
<table class="{{ $tableClasses }}">
|
|
@if(isset($head))
|
|
<thead class="bg-neutral/5 {{ $stickyHeader ? 'sticky top-0 z-10' : '' }}">
|
|
<tr class="border-b border-neutral/10">
|
|
{{ $head }}
|
|
</tr>
|
|
</thead>
|
|
@endif
|
|
|
|
@if(isset($body) && $body->isNotEmpty())
|
|
<tbody class="divide-y divide-neutral/10">
|
|
{{ $body }}
|
|
</tbody>
|
|
@elseif($slot->isNotEmpty())
|
|
<tbody class="divide-y divide-neutral/10">
|
|
{{ $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 w-14 h-14 rounded-xl bg-neutral/10">
|
|
<x-dynamic-component :component="$emptyIcon" class="size-7 text-base/40" />
|
|
</div>
|
|
<p class="text-sm text-base/60">{{ $emptyMessage }}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
@endif
|
|
|
|
@if(isset($foot))
|
|
<tfoot class="bg-neutral/5 border-t border-neutral/10">
|
|
{{ $foot }}
|
|
</tfoot>
|
|
@endif
|
|
</table>
|
|
@endif
|
|
</div>
|