@props([
    'width' => null,
])

<div id="header-footer-slide-over-preview" class="modal modal-slide-over overflow-y-auto show transition-transform duration-700" data-tw-backdrop="static" tabindex="-1" aria-hidden="false" style="margin-top: 0px; margin-left: 0px; padding-left: 0px; z-index: 10000;">
    <div class="modal-dialog modal-{{$width ? $width : ''}} ">
        <div class="modal-content animate__animated animate__zoomInUp">
            <div class="modal-header p-5 flex justify-between">
                <h2 class="font-medium text-base mr-auto">
                    {{$modalHeader}}
                </h2>
                <button wire:click="$dispatch('close-form')">
                    <x-lucide-x class="w-6 h-6 text-slate-900 mr-2 hover:scale-125 transition-transform duration-500" /> 
                </button>
            </div>
            <div class="modal-body">
                {{$modalBody}}
            </div>  
        </div>
    </div>
</div>