Utility Components

<x-shopper::container>
    <!-- Page content -->
</x-shopper::container>

<div {{ $attributes->twMerge(['class' => 'px-4 lg:px-6']) }}>
    {{ $slot }}
</div>

<x-shopper::link href="{{ route('shopper.products.index') }}">
    Products
</x-shopper::link>

<a {{ $attributes }} wire:navigate.hover>
    {{ $slot }}
</a>

<x-shopper::separator />

<div class="sh-separator py-8 lg:py-10">
    <div class="border-t border-gray-200 dark:border-white/20"></div>
</div>

<x-shopper::breadcrumb :back="route('shopper.products.index')" current="iPhone 15">
    <x-shopper::breadcrumb.link
        :href="route('shopper.products.index')"
        :title="__('Products')"
    />
</x-shopper::breadcrumb>

<x-shopper::breadcrumb.link
    :href="route('shopper.categories.index')"
    :title="__('Categories')"
/>

<x-shopper::validation-errors />

@if ($errors->count() > 0)
    <div class="bg-danger-50 my-2 rounded-lg p-4">
        <div class="flex">
            <div class="shrink-0">
                <!-- Error icon -->
            </div>
            <div class="ml-3">
                <h3 class="text-danger-800 text-sm leading-5 font-medium">
                    {{ __('shopper::forms.error') }}
                </h3>
                <div class="text-danger-700 mt-2 text-sm leading-5">
                    <ul class="list-disc space-y-1 pl-5">
                        @foreach ($errors->all() as $message)
                            <li>{{ $message }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

<x-shopper::dropdown-link :href="route('shopper.profile')">
    Profile
</x-shopper::dropdown-link>

<x-shopper::form-slider-over action="save" close-panel="form-panel">
    <x-slot:title>Edit Product</x-slot:title>

    <!-- Form content -->

    <x-slot:buttons>
        <x-filament::button type="submit">Save</x-filament::button>
    </x-slot:buttons>
</x-shopper::form-slider-over>