Joseph.Rawlings
e7b33a2f6c
- 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.
88 lines
3.0 KiB
PHP
88 lines
3.0 KiB
PHP
@props([
|
|
'title' => null,
|
|
'subtitle' => null,
|
|
'icon' => null,
|
|
'iconClass' => 'size-5',
|
|
'actions' => null,
|
|
'padding' => true,
|
|
'flush' => false,
|
|
'collapsible' => false,
|
|
'collapsed' => false,
|
|
'storageKey' => null,
|
|
])
|
|
|
|
@php
|
|
$cardClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm';
|
|
$headerClasses = 'flex items-center justify-between gap-4';
|
|
$bodyClasses = $padding ? 'p-5' : '';
|
|
$headerPadding = $flush ? 'px-5 py-4' : ($padding ? 'pb-4' : 'p-5 pb-4');
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => $cardClasses]) }}
|
|
@if($collapsible)
|
|
x-data="{
|
|
isCollapsed: {{ $collapsed ? 'true' : 'false' }},
|
|
init() {
|
|
@if($storageKey)
|
|
this.isCollapsed = localStorage.getItem('{{ $storageKey }}') === 'true';
|
|
@endif
|
|
},
|
|
toggle() {
|
|
this.isCollapsed = !this.isCollapsed;
|
|
@if($storageKey)
|
|
localStorage.setItem('{{ $storageKey }}', this.isCollapsed);
|
|
@endif
|
|
}
|
|
}"
|
|
@endif
|
|
>
|
|
@if($title || $icon || $actions || isset($header))
|
|
<div class="{{ $headerPadding }} {{ $headerClasses }} border-b border-neutral/10">
|
|
<div class="flex items-center gap-3">
|
|
@if($icon)
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-dynamic-component :component="$icon" class="{{ $iconClass }} text-primary" />
|
|
</div>
|
|
@endif
|
|
<div class="flex flex-col gap-0.5">
|
|
@if($title)
|
|
<h3 class="text-base font-semibold text-base/90">{{ $title }}</h3>
|
|
@endif
|
|
@if($subtitle)
|
|
<p class="text-sm text-base/60">{{ $subtitle }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
@if($actions)
|
|
{{ $actions }}
|
|
@endif
|
|
@if($collapsible)
|
|
<button @click="toggle()" type="button" class="text-base/50 hover:text-base/70 transition-colors p-1 rounded-lg hover:bg-neutral/10">
|
|
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 transition-transform duration-200 rotate-180' : 'size-5 transition-transform duration-200'" />
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@if(isset($header))
|
|
{{ $header }}
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@if($collapsible)
|
|
<div x-show="!isCollapsed" x-collapse x-cloak class="{{ $bodyClasses }}">
|
|
{{ $slot }}
|
|
</div>
|
|
@else
|
|
<div class="{{ $bodyClasses }}">
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(isset($footer))
|
|
<div class="px-5 py-4 border-t border-neutral/10 bg-neutral/5 rounded-b-xl">
|
|
{{ $footer }}
|
|
</div>
|
|
@endif
|
|
</div>
|