Timeline code

@props([])

@php
    /*
    | Vertical activity feed. Place one or more <x-ui.timeline.item> inside.
    |
    | Usage:
    |   <x-ui.timeline>
    |       <x-ui.timeline.item icon="check" variant="green" title="Deployed" time="2h ago">
    |           Shipped v2.1 to production.
    |       </x-ui.timeline.item>
    |   </x-ui.timeline>
    */
@endphp

<ul role="list" {{ $attributes->merge(['class' => 'space-y-0']) }}>
    {{ $slot }}
</ul>

@props([
    'icon' => 'circle',
    'variant' => 'gray',
    'title' => null,
    'time' => null,
    'last' => false,
])

@php
    /*
    | A single event in <x-ui.timeline>. Set `last` on the final item to hide the
    | connecting line.
    |
    | variant: gray, brand, green, red, amber, blue
    |
    | Usage:
    |   <x-ui.timeline.item icon="rocket-launch" variant="brand" title="Launched" time="Mar 4">
    |       The new dashboard went live.
    |   </x-ui.timeline.item>
    */
    $variants = [
        'gray' => 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400',
        'brand' => 'bg-brand-50 dark:bg-brand-950/60 text-brand-600 dark:text-brand-400',
        'green' => 'bg-green-50 dark:bg-green-950/60 text-green-600 dark:text-green-400',
        'red' => 'bg-red-50 dark:bg-red-950/60 text-red-600 dark:text-red-400',
        'amber' => 'bg-amber-50 dark:bg-amber-950/60 text-amber-600 dark:text-amber-400',
        'blue' => 'bg-accent-50 dark:bg-accent-950/60 text-accent-600 dark:text-accent-400',
    ];
@endphp

<li {{ $attributes->merge(['class' => 'relative flex gap-4 pb-6 last:pb-0']) }}>
    @unless ($last)
        <span class="absolute start-4 top-9 -ms-px h-[calc(100%-1.5rem)] w-0.5 bg-gray-200 dark:bg-gray-800" aria-hidden="true"></span>
    @endunless

    <span class="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full ring-4 ring-white dark:ring-gray-900 {{ $variants[$variant] ?? $variants['gray'] }}">
        <x-ui.icon :name="$icon" weight="bold" size="sm" />
    </span>

    <div class="min-w-0 flex-1 pt-1">
        <div class="flex items-center justify-between gap-2">
            @if ($title)
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $title }}</p>
            @endif
            @if ($time)
                <time class="shrink-0 text-xs text-gray-400 dark:text-gray-500">{{ $time }}</time>
            @endif
        </div>
        @if (trim($slot) !== '')
            <div class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">{{ $slot }}</div>
        @endif
    </div>
</li>