antv
46 lines
2.0 KiB
PHP
46 lines
2.0 KiB
PHP
@props(['id', 'maxWidth' => 'md', 'title' => 'Thông báo', 'hideHeader' => false])
|
|
|
|
@php
|
|
$maxWidthClass = [
|
|
'sm' => 'sm:max-w-sm',
|
|
'md' => 'sm:max-w-md',
|
|
'lg' => 'sm:max-w-lg',
|
|
'xl' => 'sm:max-w-xl',
|
|
'2xl' => 'sm:max-w-2xl',
|
|
][$maxWidth] ?? 'sm:max-w-md';
|
|
@endphp
|
|
|
|
@push('modals')
|
|
<div id="{{ $id }}" class="fixed inset-0 z-[100] hidden flex-col items-center justify-center outline-none opacity-0 transition-opacity duration-300" aria-labelledby="modal-title-{{ $id }}" role="dialog" aria-modal="true">
|
|
<!-- Backdrop overlay -->
|
|
<div class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm cursor-pointer" onclick="closeModal('{{ $id }}')"></div>
|
|
|
|
<!-- Modal Panel -->
|
|
<div class="modal-panel bg-white rounded-xl shadow-2xl w-full {{ $maxWidthClass }} overflow-hidden z-50 relative transform scale-95 translate-y-4 transition-all duration-300 m-4 flex flex-col max-h-[90vh]">
|
|
|
|
@if(!$hideHeader)
|
|
@if(isset($header))
|
|
{{ $header }}
|
|
@else
|
|
<div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between bg-gray-50/50 shrink-0">
|
|
<h3 id="modal-title-{{ $id }}" class="text-lg font-bold text-gray-900">{{ $title }}</h3>
|
|
<button type="button" onclick="closeModal('{{ $id }}')" class="text-gray-400 hover:text-gray-600 transition-colors focus:outline-none">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
@endif
|
|
|
|
<div class="overflow-y-auto px-6 py-6 grow">
|
|
{{ $slot }}
|
|
</div>
|
|
|
|
@if(isset($footer))
|
|
<div class="px-6 py-4 bg-gray-50 flex flex-col sm:flex-row-reverse gap-3 border-t border-gray-100 shrink-0">
|
|
{{ $footer }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endpush
|