antv
38 lines
2.1 KiB
PHP
38 lines
2.1 KiB
PHP
@props(['title' => '', 'value' => '', 'growth' => '', 'growthType' => 'up', 'iconBgClass' => '', 'iconColorClass' => '', 'subtitle' => ''])
|
|
|
|
<div class="bg-white rounded-2xl p-5 md:p-6 border border-gray-100 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] hover:shadow-md transition-shadow h-full flex flex-col justify-center">
|
|
<div class="flex items-center gap-5">
|
|
<!-- Icon -->
|
|
<div class="w-[52px] h-[52px] rounded-2xl flex items-center justify-center shrink-0 {{ $iconBgClass }}">
|
|
<div class="{{ $iconColorClass }}">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex flex-col">
|
|
<span class="text-[13px] font-semibold text-gray-500 mb-1.5">{{ $title }}</span>
|
|
<div class="flex items-end gap-3 mb-1">
|
|
@php
|
|
$isShort = is_numeric(str_replace('#', '', $value)) || strlen($value) <= 4;
|
|
@endphp
|
|
<span class="{{ $isShort ? 'text-[34px] leading-none' : 'text-[17px] leading-tight' }} font-bold text-[#1e293b]">{{ $value }}</span>
|
|
</div>
|
|
|
|
@if($growth)
|
|
<div class="flex items-center gap-1.5 mt-1">
|
|
<span class="flex items-center text-[12px] font-bold {{ $growthType === 'up' ? 'text-[#10b981]' : 'text-[#ef4444]' }}">
|
|
@if($growthType === 'up')
|
|
<svg class="w-3.5 h-3.5 mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
|
|
@else
|
|
<svg class="w-3.5 h-3.5 mr-0.5 transform rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
|
|
@endif
|
|
{{ $growth }}
|
|
</span>
|
|
<span class="text-[11px] text-gray-400 font-medium">{{ $subtitle }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|