@props(['title' => 'No data yet', 'message' => null])
<div class="flex flex-col items-center justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50/50 py-12 px-6 text-center">
    <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.5M4 18v-5a2 2 0 012-2h2.5M20 18v-5a2 2 0 00-2-2h-2.5"/></svg>
    <h3 class="mt-4 text-sm font-medium text-slate-900">{{ $title }}</h3>
    @if($message)<p class="mt-2 text-sm text-slate-500">{{ $message }}</p>@endif
    @if(isset($action))<div class="mt-6">{{ $action }}</div>@endif
</div>