Joseph.Rawlings
b4e2923a2c
- Changed component styles and classes to align with TailAdmin design patterns. - Updated color schemes, typography, and layout for consistency across components. - Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components. - Enhanced responsiveness and accessibility features in various components.
71 lines
3.1 KiB
PHP
71 lines
3.1 KiB
PHP
{{--
|
|
Resource Allocation Card Component - TailAdmin style
|
|
For displaying CPU, Memory, and other resource allocation vs entitlement
|
|
|
|
Usage:
|
|
<x-proxmox::ui.allocation-card
|
|
label="CPU Allocation"
|
|
:percent="45"
|
|
usage-summary="1.8 / 4 vCPU"
|
|
entitlement-label="4 vCPU entitlement"
|
|
description="Live hypervisor usage sampled directly from the cluster."
|
|
gradient="linear-gradient(90deg, #38bdf8 0%, #6366f1 100%)"
|
|
:badge="['label' => 'Healthy', 'class' => 'text-success-500 bg-success-50 dark:bg-success-500/15']"
|
|
/>
|
|
--}}
|
|
|
|
@props([
|
|
'label',
|
|
'percent' => null,
|
|
'usageSummary',
|
|
'entitlementLabel',
|
|
'description' => null,
|
|
'gradient' => 'linear-gradient(90deg, #465fff 0%, #8b5cf6 100%)',
|
|
'badge' => null,
|
|
'icon' => null,
|
|
'iconColor' => 'text-brand-500',
|
|
])
|
|
|
|
<div {{ $attributes->class(['rounded-2xl border border-gray-200 bg-white p-5 transition-colors duration-150 hover:bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03] dark:hover:bg-gray-800/50']) }}>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="flex items-start gap-3.5">
|
|
@if($icon)
|
|
<div class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
|
|
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
|
|
</div>
|
|
@endif
|
|
<div class="min-w-0 space-y-1">
|
|
<p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
|
|
<p class="text-xl font-bold text-gray-800 dark:text-white/90">{{ $usageSummary }}</p>
|
|
<p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $entitlementLabel }}</p>
|
|
</div>
|
|
</div>
|
|
@if($badge)
|
|
<span class="flex-shrink-0 rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badge['class'] ?? 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400' }}">
|
|
{{ $badge['label'] ?? '' }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if(!is_null($percent))
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between text-theme-xs">
|
|
<span class="text-gray-500 dark:text-gray-400">Usage</span>
|
|
<span class="font-semibold text-gray-800 dark:text-white/90">{{ $percent }}%</span>
|
|
</div>
|
|
<div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-300"
|
|
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($description)
|
|
<p class="text-theme-xs text-gray-400 dark:text-gray-500">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|