Heading

<x-shopper::heading>
    <x-slot:title>Products</x-slot:title>

    <x-slot:action>
        <x-filament::button tag="a" href="{{ route('shopper.products.create') }}">
            Add Product
        </x-filament::button>
    </x-slot:action>
</x-shopper::heading>

<x-shopper::heading>
    <x-slot:title>Dashboard</x-slot:title>
</x-shopper::heading>

<x-shopper::heading>
    <x-slot:title>Categories</x-slot:title>

    <x-slot:action>
        <x-filament::button wire:click="create">
            New Category
        </x-filament::button>
    </x-slot:action>
</x-shopper::heading>

<x-shopper::heading>
    <x-slot:title>Orders</x-slot:title>

    <x-slot:action>
        <div class="flex items-center gap-2">
            <x-filament::button color="gray" wire:click="export">
                Export
            </x-filament::button>
            <x-filament::button wire:click="create">
                Create Order
            </x-filament::button>
        </div>
    </x-slot:action>
</x-shopper::heading>

<x-shopper::heading>
    <x-slot:title>
        <div class="flex items-center gap-3">
            <span>Product: iPhone 15</span>
            <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">
                Published
            </span>
        </div>
    </x-slot:title>

    <x-slot:action>
        <x-filament::button color="danger">
            Unpublish
        </x-filament::button>
    </x-slot:action>
</x-shopper::heading>

<div
    {{ $attributes->twMerge(['class' => 'space-y-3 sm:flex sm:items-center sm:justify-between sm:space-x-4 sm:space-y-0']) }}
>
    @if ($title instanceof \Illuminate\View\ComponentSlot)
        {{ $title }}
    @else
        <h2
            class="font-heading text-2xl font-bold text-gray-900 sm:truncate sm:text-3xl dark:text-white"
        >
            {{ $title }}
        </h2>
    @endif

    @isset($action)
        {{ $action }}
    @endisset
</div>