@props(['header' => null])
<div class="px-3">
    <div class="flow-root">
        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                <div
                    class="overflow-hidden shadow-sm outline-1 outline-black/5 sm:rounded-lg dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
                    <table class="relative min-w-full divide-y divide-gray-300 dark:divide-white/15">
                        @if($header)
                            <thead class="bg-gray-100 dark:bg-gray-800/75">
                            <tr>
                                {{ $header }}
                            </tr>
                            </thead>
                        @endif
                        <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-gray-800/50">
                            {{ $slot }}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>