59 lines
2.3 KiB
PHP
59 lines
2.3 KiB
PHP
@props([
|
|
'title' => '',
|
|
'tooltip' => '',
|
|
'icon' => 'box',
|
|
'value' => 0,
|
|
'bg' => 'bg-white',
|
|
'color' => 'primary', // màu chính: primary, success, danger,...
|
|
'width' => 'w-[300px]',
|
|
])
|
|
|
|
@php
|
|
$textColor = match ($color) {
|
|
'primary' => 'text-primary',
|
|
'success' => 'text-green-500',
|
|
'danger' => 'text-red-500',
|
|
'warning' => 'text-yellow-500',
|
|
default => 'text-slate-700',
|
|
};
|
|
|
|
$iconColor = $textColor;
|
|
$tooltipBg = match ($color) {
|
|
'primary' => 'bg-orange-500',
|
|
'success' => 'bg-green-500',
|
|
'danger' => 'bg-red-500',
|
|
'warning' => 'bg-yellow-500',
|
|
default => 'bg-gray-800',
|
|
};
|
|
@endphp
|
|
|
|
<div
|
|
class="report-box zoom-in {{ $width }} relative hover:scale-105 transition-all duration-300 zoom-in before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-200 before:content-[''] before:rounded-lg animate__animated animate__fadeInRight">
|
|
<div class="box p-3 {{ $bg }} shadow-lg rounded-lg relative">
|
|
<!-- Nội dung chính -->
|
|
<div class="relative z-10">
|
|
<div class="flex items-start">
|
|
<i data-lucide="{{ $icon }}" class="w-6 h-6 {{ $iconColor }}"></i>
|
|
|
|
<div class="ml-auto" x-data="{ showTooltip: false }">
|
|
<div @mouseenter="showTooltip = true" @mouseleave="showTooltip = false"
|
|
class="relative {{ $tooltipBg }} text-white text-sm rounded-full p-2 cursor-pointer flex items-center">
|
|
{{ $tooltip }}
|
|
<i data-lucide="chevron-up" class="w-4 h-4 text-white inline-block ml-1"></i>
|
|
|
|
<div x-cloak x-show="showTooltip" x-transition
|
|
class="absolute -top-10 right-0 mt-2 bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg z-50 whitespace-nowrap">
|
|
{{ $tooltip }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-xl font-medium leading-8 mt-6">
|
|
<span class="text_siderbar_top">{{ $value }}</span>
|
|
</div>
|
|
<div class="text-base text-slate-500 mt-1">{{ $title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|