@props(['title' => 'Nothing here yet', 'message' => null, 'icon' => 'heroicon-o-inbox'])
<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center px-6 py-14 text-center']) }}>
    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-ink-100 text-ink-400 dark:bg-ink-800">
        <x-dynamic-component :component="$icon" class="h-7 w-7" />
    </div>
    <h3 class="mt-4 text-sm font-semibold text-ink-900 dark:text-white">{{ $title }}</h3>
    @if ($message)<p class="mt-1 max-w-sm text-sm text-ink-500">{{ $message }}</p>@endif
    @if (trim($slot))<div class="mt-5">{{ $slot }}</div>@endif
</div>