@props(['title' => false,'subtitle' => false, 'button' => false])
<div class="sm:flex sm:items-center">
    <div class="sm:flex-auto">
        @if($title)
            <h1 {{ $title->attributes->merge(['class' => 'text-base font-semibold leading-6 text-gray-900']) }}>{{ $title }}</h1>
        @endif
        @if($subtitle)
            <p {{ $subtitle->attributes->merge(['class' => 'mt-2 text-sm text-gray-700']) }}>{{ $subtitle }}</p>
        @endif
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
        @if($button)
            @php $button_classes = 'block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'; @endphp
            <button {{ $button->attributes->merge(['type' => 'button','class' => $button_classes]) }}>{{ $button }}</button>
        @endif
    </div>
</div>