Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: update stat card component for improved styling and layout

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 11:48:48 -05:00
parent 7190d7a818
commit eb015f3421
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
View File

@@ -1,5 +1,5 @@
{{-- {{--
Stat Card Component - TailServer Theme (shadcn-inspired) Stat Card Component - shadcn-inspired
Usage: Usage:
<x-proxmox::ui.stat-card value="12" label="CPU %" /> <x-proxmox::ui.stat-card value="12" label="CPU %" />
@@ -40,20 +40,20 @@
<{{ $tag }} <{{ $tag }}
@if($href) href="{{ $href }}" @endif @if($href) href="{{ $href }}" @endif
{{ $attributes->class([ {{ $attributes->class([
'flex flex-col gap-6 rounded-xl border border-neutral/15 bg-card py-6 text-card-foreground shadow-sm', 'rounded-xl border bg-card p-6 shadow-sm',
'hover:shadow-md transition-shadow duration-150 cursor-pointer' => $href || $clickable, 'hover:bg-accent/50 transition-colors duration-150 cursor-pointer' => $href || $clickable,
]) }} ]) }}
> >
<div class="flex flex-row items-center justify-between space-y-0 px-6 pb-2"> <div class="flex items-center justify-between pb-2">
<h3 @class(['text-sm font-medium text-muted-foreground'])>{{ $label }}</h3> <span class="text-sm font-medium text-muted-foreground">{{ $label }}</span>
@if($icon) @if($icon)
<x-dynamic-component :component="$icon" class="size-4 {{ $iconClass }}" /> <x-dynamic-component :component="$icon" class="size-4 {{ $iconClass }}" />
@endif @endif
</div> </div>
<div class="px-6"> <div class="mt-1">
<div @class(['font-bold', 'text-2xl' => !$compact, 'text-xl' => $compact])> <span @class(['font-bold tracking-tight', 'text-2xl' => !$compact, 'text-xl' => $compact])>
@if($prefix)<span class="text-muted-foreground">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="text-muted-foreground text-lg">{{ $suffix }}</span>@endif @if($prefix)<span class="text-muted-foreground">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="text-muted-foreground text-base ml-1">{{ $suffix }}</span>@endif
</div> </span>
@if($change !== null || $changeLabel) @if($change !== null || $changeLabel)
<p class="text-xs text-muted-foreground mt-1"> <p class="text-xs text-muted-foreground mt-1">
@if($change !== null) @if($change !== null)
@@ -67,15 +67,15 @@
</div> </div>
@if($progress !== null) @if($progress !== null)
<div class="px-6 pb-2"> <div class="mt-4">
<div class="h-1.5 w-full rounded-full bg-neutral/10 overflow-hidden"> <div class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
<div class="h-full {{ $progressColor }} rounded-full transition-all duration-300" style="width: {{ min(100, $progress) }}%"></div> <div class="h-full {{ $progressColor }} rounded-full transition-all duration-150" style="width: {{ min(100, $progress) }}%"></div>
</div> </div>
</div> </div>
@endif @endif
@if($statusText) @if($statusText)
<div class="border-t border-neutral/10 px-6 pt-4 text-xs font-medium {{ $statusClass }}"> <div class="border-t mt-4 pt-3 text-xs font-medium {{ $statusClass }}">
{{ $statusText }} {{ $statusText }}
</div> </div>
@endif @endif