Forge Deployment Row code

@props([
    'commit' => null,
    'branch' => null,
    'author' => null,
    'message' => null,
    'status' => 'Success',
    'statusVariant' => 'green',
    'duration' => null,
    'deployedAt' => null,
    'href' => null,
    'outputHref' => null,
])

@php
    /*
    | Deployment history row with commit, branch, author, duration and output
    | action. Use in cards, activity feeds or paginated deployment tables.
    |
    | Usage:
    |   <x-ui.forge-deployment-row commit="fc4a19f" branch="main" status="Success" />
    */
@endphp

@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => 'flex min-w-0 flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-brand-300 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-brand-800 dark:hover:bg-gray-900/70 sm:flex-row sm:items-center sm:justify-between']) }}>
@else
    <div {{ $attributes->merge(['class' => 'flex min-w-0 flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition dark:border-gray-800 dark:bg-gray-900 sm:flex-row sm:items-center sm:justify-between']) }}>
@endif
    <div class="min-w-0">
        <div class="flex min-w-0 flex-wrap items-center gap-2">
            <x-ui.badge :variant="$statusVariant" size="sm" dot>{{ $status }}</x-ui.badge>
            @if ($branch)
                <span class="inline-flex min-w-0 items-center gap-1 rounded-md bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-300">
                    <x-ui.icon name="git-branch" size="xs" />
                    <span class="truncate">{{ $branch }}</span>
                </span>
            @endif
            @if ($commit)
                <span class="font-mono text-xs text-gray-500 dark:text-gray-400">{{ $commit }}</span>
            @endif
        </div>

        @if ($message)
            <p class="mt-2 truncate text-sm font-medium text-gray-900 dark:text-white">{{ $message }}</p>
        @endif

        <p class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
            @if ($author)
                <span>{{ $author }}</span>
            @endif
            @if ($deployedAt)
                <span>{{ $deployedAt }}</span>
            @endif
            @if ($duration)
                <span>{{ $duration }}</span>
            @endif
        </p>
    </div>

    <div class="flex shrink-0 items-center gap-2">
        @if ($outputHref)
            <x-ui.button :href="$outputHref" variant="outline" size="sm" icon="terminal-window">Output</x-ui.button>
        @endif
        {{ $actions ?? '' }}
    </div>
@if ($href)
    </a>
@else
    </div>
@endif