Joseph.Rawlings
7190d7a818
- Refactored select component to align with shadcn design principles. - Updated server status indicator component for consistency with shadcn style. - Modified spinner component to follow shadcn design guidelines. - Enhanced stat card component with shadcn-inspired styles. - Adjusted tab panel component to reflect shadcn design updates. - Revamped table row and table data cell components to match shadcn aesthetics. - Updated table header cell component for improved styling consistency. - Refined table component to align with shadcn design principles. - Enhanced tabs component with shadcn-inspired styles. - Updated toggle component to follow shadcn design guidelines. - Refactored tooltip component to align with shadcn design principles. - Updated server card component to reflect shadcn-inspired design.
83 lines
2.9 KiB
PHP
83 lines
2.9 KiB
PHP
{{--
|
|
Stat Card Component - TailServer Theme (shadcn-inspired)
|
|
|
|
Usage:
|
|
<x-proxmox::ui.stat-card value="12" label="CPU %" />
|
|
<x-proxmox::ui.stat-card value="8.5" suffix="GB" label="Memory" icon="ri-database-2-line" />
|
|
<x-proxmox::ui.stat-card value="3" label="Servers" status="success" statusText="All active" />
|
|
--}}
|
|
|
|
@props([
|
|
'value',
|
|
'label',
|
|
'suffix' => null,
|
|
'prefix' => null,
|
|
'icon' => null,
|
|
'iconClass' => 'text-muted-foreground',
|
|
'status' => null,
|
|
'statusText' => null,
|
|
'href' => null,
|
|
'progress' => null,
|
|
'progressColor' => 'bg-primary',
|
|
'clickable' => false,
|
|
'compact' => false,
|
|
'change' => null,
|
|
'changeLabel' => null,
|
|
])
|
|
|
|
@php
|
|
$tag = $href ? 'a' : 'div';
|
|
$statusClasses = [
|
|
'success' => 'text-success',
|
|
'warning' => 'text-warning',
|
|
'danger' => 'text-danger',
|
|
'info' => 'text-info',
|
|
'muted' => 'text-muted-foreground',
|
|
];
|
|
$statusClass = $statusClasses[$status] ?? '';
|
|
@endphp
|
|
|
|
<{{ $tag }}
|
|
@if($href) href="{{ $href }}" @endif
|
|
{{ $attributes->class([
|
|
'flex flex-col gap-6 rounded-xl border border-neutral/15 bg-card py-6 text-card-foreground shadow-sm',
|
|
'hover:shadow-md transition-shadow duration-150 cursor-pointer' => $href || $clickable,
|
|
]) }}
|
|
>
|
|
<div class="flex flex-row items-center justify-between space-y-0 px-6 pb-2">
|
|
<h3 @class(['text-sm font-medium text-muted-foreground'])>{{ $label }}</h3>
|
|
@if($icon)
|
|
<x-dynamic-component :component="$icon" class="size-4 {{ $iconClass }}" />
|
|
@endif
|
|
</div>
|
|
<div class="px-6">
|
|
<div @class(['font-bold', '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
|
|
</div>
|
|
@if($change !== null || $changeLabel)
|
|
<p class="text-xs text-muted-foreground mt-1">
|
|
@if($change !== null)
|
|
<span @class(['font-medium', $change >= 0 ? 'text-success' : 'text-danger'])>
|
|
{{ $change >= 0 ? '+' : '' }}{{ $change }}%
|
|
</span>
|
|
@endif
|
|
{{ $changeLabel ?? 'from last period' }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
|
|
@if($progress !== null)
|
|
<div class="px-6 pb-2">
|
|
<div class="h-1.5 w-full rounded-full bg-neutral/10 overflow-hidden">
|
|
<div class="h-full {{ $progressColor }} rounded-full transition-all duration-300" style="width: {{ min(100, $progress) }}%"></div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($statusText)
|
|
<div class="border-t border-neutral/10 px-6 pt-4 text-xs font-medium {{ $statusClass }}">
|
|
{{ $statusText }}
|
|
</div>
|
|
@endif
|
|
</{{ $tag }}>
|