36 lines
1.3 KiB
PHP
36 lines
1.3 KiB
PHP
@props([
|
|
'title',
|
|
'value',
|
|
'icon', // ← Añade esta línea
|
|
'color',
|
|
'trend' => null, // Valor por defecto: null
|
|
'trendColor' => 'text-gray-500' // Color por defecto
|
|
])
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition duration-300">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2>
|
|
<p class="text-xl font-bold text-gray-500">{{ $title }}</p>
|
|
</h2>
|
|
<p class="text-2xl font-bold">{{ $value }}</p>
|
|
</div>
|
|
<div class="{{ $color }} p-3 rounded-full">
|
|
@if($icon === 'folder')
|
|
<flux:icon.folder variant="solid" class="w-8 h-8 text-white"/>
|
|
@elseif($icon === 'document')
|
|
<flux:icon.document variant="solid" class="w-8 h-8 text-white"/>
|
|
@elseif($icon === 'storage')
|
|
<flux:icon.server variant="solid" class="w-8 h-8 text-white"/>
|
|
@elseif($icon === 'clock')
|
|
<flux:icon.clock variant="solid" class="w-8 h-8 text-white"/>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<span class="text-sm {{ $trendColor }}">
|
|
<x-icons icon="arrow-up" class="w-4 h-4 inline" /> {{ $trend }}%
|
|
</span>
|
|
<span class="text-sm text-gray-500">desde el último mes</span>
|
|
</div>
|
|
</div> |