35 lines
1.5 KiB
PHP
35 lines
1.5 KiB
PHP
@props(['label'=>'', 'value', 'unit' => '', 'color' => 'blue'])
|
|
|
|
@php
|
|
$colors = [
|
|
'indigo' => 'bg-indigo-50 text-indigo-600',
|
|
'purple' => 'bg-purple-50 text-purple-600',
|
|
'blue' => 'bg-blue-50 text-blue-600',
|
|
'emerald' => 'bg-emerald-50 text-emerald-600',
|
|
'orange' => 'bg-orange-50 text-orange-600',
|
|
'red' => 'bg-red-50 text-red-600',
|
|
];
|
|
|
|
$colorClass = $colors[$color] ?? $colors['blue'];
|
|
@endphp
|
|
|
|
<div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-soft)] hover:-translate-y-1 transition-all duration-300 flex flex-col justify-center relative overflow-hidden group">
|
|
|
|
<div class="absolute -right-6 -top-6 w-24 h-24 bg-gradient-to-br from-current to-transparent opacity-[0.03] rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500 {{ str_replace('bg-', 'text-', explode(' ', $colorClass)[0]) }}"></div>
|
|
|
|
<div class="flex items-center gap-4 mb-4 relative z-10">
|
|
<div class="p-3 rounded-2xl {{ $colorClass }} shadow-sm">
|
|
{{ $slot }}
|
|
</div>
|
|
<span class="text-sm font-semibold text-slate-500 uppercase tracking-wider">{{ $label }}</span>
|
|
</div>
|
|
<div class="relative z-10">
|
|
<h3 class="text-3xl md:text-4xl font-extrabold text-slate-800 tracking-tight">
|
|
{{ $value }}
|
|
@if($unit)
|
|
<span class="text-base font-semibold text-slate-400 ml-1">{{ $unit }}</span>
|
|
@endif
|
|
</h3>
|
|
</div>
|
|
</div>
|