Form Section code

@props([
    'title' => null,
    'description' => null,
    'icon' => null,
    'padding' => 'base',
])

@php
    /*
    | Settings/profile form section. Keeps explanatory copy beside a bordered
    | form panel so repeated forms do not need to rebuild this grid each time.
    |
    | Usage:
    |   <x-ui.form-section title="Profile" description="Public account details.">
    |       ...
    |   </x-ui.form-section>
    */
    $paddingClass = [
        'none' => '',
        'sm' => 'p-4',
        'base' => 'p-6',
        'lg' => 'p-8',
    ][$padding] ?? 'p-6';
@endphp

<section {{ $attributes->merge(['class' => 'grid gap-6 lg:grid-cols-[minmax(0,18rem)_1fr] lg:gap-10']) }}>
    <div>
        @if ($icon)
            <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 dark:bg-brand-950/50 dark:text-brand-300 dark:ring-brand-900">
                <x-ui.icon :name="$icon" size="lg" />
            </div>
        @endif

        @if ($title)
            <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>
        @endif

        @if ($description)
            <p class="mt-2 text-sm leading-6 text-gray-500 dark:text-gray-400">{{ $description }}</p>
        @endif

        @isset($aside)
            <div class="mt-5 text-sm text-gray-500 dark:text-gray-400">{{ $aside }}</div>
        @endisset
    </div>

    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
        <div class="{{ $paddingClass }}">
            {{ $slot }}
        </div>
    </div>
</section>