29 lines
1.3 KiB
PHP
29 lines
1.3 KiB
PHP
@props(['title' => null, 'icon' => null])
|
|
|
|
{{-- Standard modal frame: header + footer stay fixed, only the body scrolls, capped to the
|
|
viewport so a tall form never scrolls the whole dialog. Body content controls its own
|
|
padding/columns. Works on phone, tablet and desktop. --}}
|
|
<div class="flex flex-col max-h-[85dvh] w-full">
|
|
<header class="flex items-center gap-3 px-5 py-4 border-b border-line-soft shrink-0">
|
|
@if ($icon)
|
|
<span class="grid place-items-center w-9 h-9 rounded-lg bg-accent/10 text-accent shrink-0"><x-icon :name="$icon" :size="18" /></span>
|
|
@endif
|
|
<h2 class="text-[15px] font-bold text-ink truncate">{{ $title }}</h2>
|
|
<button type="button" wire:click="closeModal"
|
|
class="ml-auto grid place-items-center w-9 h-9 rounded-lg text-ink-3 hover:bg-raised hover:text-ink transition-colors shrink-0"
|
|
aria-label="{{ __('common.close') }}">
|
|
<x-icon name="close" :size="18" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="flex-1 overflow-y-auto min-h-0">
|
|
{{ $slot }}
|
|
</div>
|
|
|
|
@isset($footer)
|
|
<footer class="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-line-soft shrink-0">
|
|
{{ $footer }}
|
|
</footer>
|
|
@endisset
|
|
</div>
|