Empty Card

<x-shopper::empty-card
    heading="No zones available"
    description="Create shipping zones to define where you deliver products."
    icon="untitledui-globe-02"
/>

<x-shopper::empty-card
    heading="No products"
    description="Start by adding your first product to the catalog."
    icon="untitledui-package"
>
    <x-slot:action>
        <x-filament::button wire:click="create">
            Add Product
        </x-filament::button>
    </x-slot:action>
</x-shopper::empty-card>

<x-shopper::empty-card
    heading="No addresses saved"
    description="Customer addresses will appear here."
/>

@props([
    'heading',
    'description' => null,
    'icon' => null,
    'action' => null,
])

<div
    {{ $attributes->twMerge(['class' => 'flex flex-col items-center justify-center px-8 py-10 text-center']) }}
>
    @if ($icon)
        <div
            class="flex size-12 items-center justify-center rounded-full bg-gray-100 text-gray-700 dark:bg-gray-900 dark:text-white"
        >
            @svg($icon, 'size-5', ['aria-hidden' => 'true'])
        </div>
    @endif

    <h3 @class(['font-medium text-gray-900 dark:text-white', 'mt-2' => $icon])>
        {{ $heading }}
    </h3>
    @if ($description)
        <p class="mx-auto mt-1 max-w-lg text-sm text-gray-500 dark:text-gray-400">
            {{ $description }}
        </p>
    @endif

    @if ($action)
        <div class="mt-6">
            {{ $action }}
        </div>
    @endif
</div>