Card Folder code

@props([
    'tab',
    'tabIcon' => null,
    'title' => null,
    'meta' => null,
])

@php
    /*
    | File-folder card: a physical tab grows out of the top edge and merges
    | seamlessly into the body, like a manila folder or an editor tab. Good
    | for grouped documents, environments and log files.
    |
    | Usage:
    |   <x-ui.card-folder tab="production.log" tab-icon="file-text" meta="Rotated daily">
    |       Log lines...
    |   </x-ui.card-folder>
    */
@endphp

<div {{ $attributes->merge(['class' => 'min-w-0']) }}>
    <div class="flex">
        {{-- -mb-px + matching background hides the body's top border under the tab --}}
        <span class="relative z-10 -mb-px inline-flex items-center gap-1.5 rounded-t-lg border border-b-0 border-gray-200 bg-white px-3.5 py-1.5 text-xs font-semibold text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200">
            @if ($tabIcon)
                <x-ui.icon :name="$tabIcon" weight="regular" size="sm" class="text-gray-400 dark:text-gray-500" />
            @endif
            {{ $tab }}
        </span>
    </div>

    <div class="rounded-b-xl rounded-tr-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
        @if ($title || $meta)
            <div class="mb-3 flex items-baseline justify-between gap-3">
                @if ($title)
                    <h3 class="text-sm font-semibold tracking-tight text-gray-900 dark:text-white">{{ $title }}</h3>
                @endif
                @if ($meta)
                    <p class="text-xs text-gray-400 dark:text-gray-500">{{ $meta }}</p>
                @endif
            </div>
        @endif

        <div class="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            {{ $slot }}
        </div>
    </div>
</div>