Badge Glow code

@props([
    'variant' => 'green',
    'pulse' => true,
])

@php
    /*
    | Broadcast pill: a neutral surface that borrows all of its colour from a
    | soft outer glow and a pinging dot — the "on air" light of the badge
    | family. Best used sparingly for genuinely live things.
    |
    | Variants: brand, green, red, amber, blue
    |
    | Usage:
    |   <x-ui.badge-glow variant="green">Live now</x-ui.badge-glow>
    |   <x-ui.badge-glow variant="red">On air</x-ui.badge-glow>
    */
    $glows = [
        'brand' => 'ring-brand-200 dark:ring-brand-900 shadow-brand-500/40 dark:shadow-brand-400/30',
        'green' => 'ring-green-200 dark:ring-green-900 shadow-green-500/40 dark:shadow-green-400/30',
        'red' => 'ring-red-200 dark:ring-red-900 shadow-red-500/40 dark:shadow-red-400/30',
        'amber' => 'ring-amber-200 dark:ring-amber-900 shadow-amber-500/40 dark:shadow-amber-400/30',
        'blue' => 'ring-accent-200 dark:ring-accent-900 shadow-accent-500/40 dark:shadow-accent-400/30',
    ];

    $dotColors = [
        'brand' => 'bg-brand-500', 'green' => 'bg-green-500', 'red' => 'bg-red-500',
        'amber' => 'bg-amber-500', 'blue' => 'bg-accent-500',
    ];

    $dotColor = $dotColors[$variant] ?? $dotColors['green'];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-gray-800 shadow-[0_0_14px_-2px] ring-1 dark:bg-gray-900 dark:text-gray-100 '.($glows[$variant] ?? $glows['green'])]) }}>
    <span class="relative flex h-1.5 w-1.5">
        @if ($pulse)
            <span class="absolute inline-flex h-full w-full rounded-full opacity-70 motion-safe:animate-ping {{ $dotColor }}"></span>
        @endif
        <span class="relative inline-flex h-1.5 w-1.5 rounded-full {{ $dotColor }}"></span>
    </span>
    {{ $slot }}
</span>