matab-panel/resources/views/components/navigation-card.blade.php

57 lines
1.7 KiB
PHP

@props([
'title',
'description' => null,
'icon' => 'heroicon-o-squares-2x2',
'url' => '#',
'count' => null,
'color' => 'blue',
])
@php
$headerClass = match ($color) {
'blue', 'primary' => 'bg-blue-600',
'green', 'success' => 'bg-green-600',
'red', 'danger' => 'bg-red-600',
'yellow', 'warning'=> 'bg-amber-500',
'purple' => 'bg-purple-600',
'orange' => 'bg-orange-500',
'teal' => 'bg-teal-600',
'slate' => 'bg-slate-600',
default => 'bg-blue-600',
};
$dir = app()->getLocale() === 'fa' ? 'rtl' : 'ltr';
@endphp
<a href="{{ $url }}" wire:navigate class="group block h-full">
<div class="nav-card group-hover:shadow-md">
<div class="flex items-center gap-4 px-6 py-5 {{ $headerClass }}" dir="{{ $dir }}">
<div class="shrink-0 rounded-lg bg-white/25 p-2">
<x-dynamic-component
:component="$icon"
class="h-5 w-5 text-white"
style="width:1.25rem;height:1.25rem;display:block;color:white"
/>
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-xl font-bold text-white leading-snug">
{{ $title }}
</p>
@if ($count !== null)
<p class="mt-0.5 text-sm text-white/75">{{ number_format($count) }}</p>
@endif
</div>
</div>
<div class="flex-1 px-6 py-5" dir="{{ $dir }}">
@if ($description)
<p class="nav-card-body-text line-clamp-3">
{{ $description }}
</p>
@endif
</div>
</div>
</a>