Page Header code

@props([
    'title',
    'description' => null,
    'size' => 'base',
    'hideTitleOnMobile' => false,
])

@php
    /*
    | App (dashboard) page header: title + description on the left, actions on
    | the right. Use the `breadcrumbs` slot above the title if needed.
    |
    | Usage:
    |   <x-ui.page-header title="Team" description="Manage your members.">
    |       <x-slot:actions><x-ui.button icon="plus">Invite</x-ui.button></x-slot:actions>
    |   </x-ui.page-header>
    |
    | size: base, lg
    */
    $titleSizes = [
        'base' => 'text-2xl',
        'lg' => 'text-3xl',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between']) }}>
    <div class="min-w-0">
        @isset($breadcrumbs)
            <div class="mb-2">{{ $breadcrumbs }}</div>
        @endisset
        <h1 @class([
            'font-semibold tracking-tight text-gray-900 dark:text-white',
            $titleSizes[$size] ?? $titleSizes['base'],
            'hidden lg:block' => $hideTitleOnMobile,
        ])>{{ $title }}</h1>
        @if ($description)
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $description }}</p>
        @endif
    </div>

    @isset($actions)
        <div class="flex shrink-0 items-center gap-2">{{ $actions }}</div>
    @endisset
</div>