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.
This commit is contained in:
41
extensions/Servers/Proxmox/views/components/tabs.blade.php
Normal file
41
extensions/Servers/Proxmox/views/components/tabs.blade.php
Normal file
@@ -0,0 +1,41 @@
|
||||
@props([
|
||||
'items' => [],
|
||||
'vertical' => false,
|
||||
'gap' => '2',
|
||||
])
|
||||
|
||||
@php
|
||||
$containerClasses = $vertical
|
||||
? "flex flex-col gap-{$gap}"
|
||||
: "inline-flex items-center rounded-lg border border-neutral/30 bg-background p-1 gap-1";
|
||||
@endphp
|
||||
|
||||
<div
|
||||
x-data="{ activeTab: '{{ collect($items)->first()['id'] ?? '' }}' }"
|
||||
{{ $attributes->merge(['class' => $containerClasses]) }}
|
||||
>
|
||||
{{-- Tab buttons --}}
|
||||
<div class="{{ $vertical ? 'flex flex-col gap-1' : 'flex items-center gap-1' }}">
|
||||
@foreach($items as $item)
|
||||
<button
|
||||
type="button"
|
||||
@click="activeTab = '{{ $item['id'] }}'"
|
||||
:class="activeTab === '{{ $item['id'] }}'
|
||||
? 'bg-primary text-white shadow-sm'
|
||||
: 'text-base/70 hover:text-base/90 hover:bg-neutral/10'"
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 flex items-center gap-2"
|
||||
>
|
||||
@if(isset($item['icon']))
|
||||
<x-dynamic-component :component="$item['icon']" class="size-4" />
|
||||
@endif
|
||||
{{ $item['label'] }}
|
||||
@if(isset($item['badge']))
|
||||
<span class="ml-1 px-1.5 py-0.5 text-xs rounded-full bg-white/20">{{ $item['badge'] }}</span>
|
||||
@endif
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Tab content --}}
|
||||
{{ $slot }}
|
||||
</div>
|
||||
Reference in New Issue
Block a user