Files
Virtnet.bond/extensions/Servers/Proxmox/views/components/table.blade.php
Joseph.Rawlings e7b33a2f6c Refactor Proxmox server views for improved UI consistency and usability
- 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.
2025-12-17 11:24:17 -05:00

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>