@props([
    'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
    'title' => 'Nothing here yet',
    'message' => '',
])

<div class="flex flex-col items-center justify-center py-16 text-center">
    <div class="h-12 w-12 rounded-full bg-zinc-100 dark:bg-zinc-900 flex items-center justify-center mb-4">
        <svg class="w-6 h-6 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon }}" />
        </svg>
    </div>
    <h3 class="text-sm font-semibold text-zinc-900 dark:text-white">{{ $title }}</h3>
    @if ($message !== '')
        <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $message }}</p>
    @endif
    @isset($action)
        <div class="mt-4">{{ $action }}</div>
    @endisset
</div>