30 lines
1.2 KiB
PHP
30 lines
1.2 KiB
PHP
|
@props(['title', 'value', 'icon', 'color'])
|
||
|
|
|
||
|
|
@php
|
||
|
|
// Map warna untuk icon background dan text
|
||
|
|
$colors = [
|
||
|
|
'indigo' => 'bg-indigo-100 text-indigo-600 shadow-indigo-100',
|
||
|
|
'emerald' => 'bg-emerald-100 text-emerald-600 shadow-emerald-100',
|
||
|
|
'rose' => 'bg-rose-100 text-rose-600 shadow-rose-100',
|
||
|
|
'amber' => 'bg-amber-100 text-amber-600 shadow-amber-100',
|
||
|
|
'blue' => 'bg-blue-100 text-blue-600 shadow-blue-100',
|
||
|
|
][$color ?? 'indigo'];
|
||
|
|
@endphp
|
||
|
|
|
||
|
|
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-300">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<div class="w-12 h-12 {{ $colors }} rounded-2xl flex items-center justify-center shadow-sm">
|
||
|
|
<i class="fas {{ $icon }} text-xl"></i>
|
||
|
|
</div>
|
||
|
|
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Statistik</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-1">
|
||
|
|
<h3 class="text-3xl font-black text-slate-800 leading-none">
|
||
|
|
{{ $value }}
|
||
|
|
</h3>
|
||
|
|
<p class="text-xs font-bold text-slate-500 uppercase tracking-tighter">
|
||
|
|
{{ $title }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|