Monitoring Chart Board code

@props([
    'title',
    'badge' => null,
    'ranges' => ['1H', '24H', '7D', '14D', '30D'],
    'selectedRange' => '24H',
    'showCalendar' => true,
])

@php
    /*
    | Board wrapper for one or more <x-ui.monitoring-chart> panels — page title,
    | optional badge, and a compact time-range selector.
    |
    | Usage:
    |   <x-ui.monitoring-chart-board title="Requests" badge="Sampled data">
    |       <x-ui.monitoring-chart ... />
    |       <x-ui.monitoring-chart ... />
    |   </x-ui.monitoring-chart-board>
    */
@endphp

<section {{ $attributes->class(['min-w-0']) }} x-data="{ range: @js($selectedRange) }">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <h2 class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">
            {{ $title }}
        </h2>

        <div class="flex flex-wrap items-center gap-3">
            @if ($badge)
                <x-ui.badge variant="outline" size="sm" class="border-gray-300 text-gray-600 dark:border-gray-700 dark:text-gray-300">
                    {{ $badge }}
                </x-ui.badge>
            @endif

            @if ($ranges !== [])
                <div class="inline-flex items-center overflow-hidden rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-800 dark:bg-gray-900">
                    @foreach ($ranges as $range)
                        <button
                            type="button"
                            class="rounded-md px-2.5 py-1 text-xs font-semibold transition"
                            :class="range === @js($range)
                                ? 'bg-gray-900 text-white shadow-sm dark:bg-gray-700'
                                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                            @click="range = @js($range)"
                        >
                            {{ $range }}
                        </button>
                    @endforeach

                    @if ($showCalendar)
                        <button
                            type="button"
                            class="ml-0.5 inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
                            aria-label="Choose date range"
                        >
                            <x-ui.icon name="calendar-blank" size="sm" />
                        </button>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <div class="mt-6 grid gap-4 lg:grid-cols-2">
        {{ $slot }}
    </div>
</section>