73 lines
2.4 KiB
PHP
73 lines
2.4 KiB
PHP
{{--
|
|
Componente Card Statistica
|
|
Componente riutilizzabile per visualizzare statistiche numeriche con icona
|
|
|
|
Parametri:
|
|
- title: Titolo della statistica
|
|
- value: Valore numerico da visualizzare
|
|
- icon: Classe CSS dell'icona (es: 'fas fa-building')
|
|
- color: Colore del tema (primary, success, warning, danger, info)
|
|
- subtitle: Sottotitolo opzionale
|
|
- link: Link opzionale per rendere la card cliccabile
|
|
--}}
|
|
|
|
@props([
|
|
'title' => 'Statistica',
|
|
'value' => '0',
|
|
'icon' => 'fas fa-chart-bar',
|
|
'color' => 'primary',
|
|
'subtitle' => null,
|
|
'link' => null
|
|
])
|
|
|
|
@php
|
|
$colorClasses = [
|
|
'primary' => 'text-blue-500 bg-blue-100',
|
|
'success' => 'text-green-500 bg-green-100',
|
|
'warning' => 'text-yellow-500 bg-yellow-100',
|
|
'danger' => 'text-red-500 bg-red-100',
|
|
'info' => 'text-indigo-500 bg-indigo-100',
|
|
];
|
|
|
|
$cardClass = $link ? 'cursor-pointer hover:shadow-lg transition-shadow' : '';
|
|
$iconColor = $colorClasses[$color] ?? $colorClasses['primary'];
|
|
@endphp
|
|
|
|
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg {{ $cardClass }}"
|
|
@if($link) onclick="window.location.href='{{ $link }}'" @endif>
|
|
<div class="p-6">
|
|
<div class="flex items-center">
|
|
<!-- Icona -->
|
|
<div class="flex-shrink-0">
|
|
<div class="w-12 h-12 {{ $iconColor }} rounded-full flex items-center justify-center">
|
|
<i class="{{ $icon }} text-xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenuto -->
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
|
|
{{ $title }}
|
|
</dt>
|
|
<dd class="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{{ $value }}
|
|
</dd>
|
|
@if($subtitle)
|
|
<dd class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
{{ $subtitle }}
|
|
</dd>
|
|
@endif
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- Freccia se c'è un link -->
|
|
@if($link)
|
|
<div class="flex-shrink-0 ml-4">
|
|
<i class="fas fa-chevron-right text-gray-400"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|