Refactor component and incident badges

Author: jbrooksuk

resources/views/components/component-badge.blade.php

@@ -1,16 +1 @@
-<div {{ $attributes->style([
-    Illuminate\Support\Arr::toCssStyles([
-        \Filament\Support\get_color_css_variables(
-            $color,
-            shades: [400, 900],
-        ),
-    ]),
-]) }}>
-    <div {{ $attributes->class([
-        'flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold leading-tight shadow bg-custom-400 text-custom-900',
-    ]) }}>
-        @svg($icon, 'h-5 w-5')
-
-        <span>{{ $label }}</span>
-    </div>
-</div>
+<x-cachet::badge :color="$color" :label="$label" :icon="$icon" />

resources/views/components/incident-badge.blade.php

@@ -1,16 +1 @@
-<div {{ $attributes->style([
-    Illuminate\Support\Arr::toCssStyles([
-        \Filament\Support\get_color_css_variables(
-            $color,
-            shades: [400, 900],
-        ),
-    ]),
-]) }}>
-    <div {{ $attributes->class([
-        'flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold leading-tight shadow bg-custom-400 text-custom-900',
-    ]) }}>
-        @svg($icon, 'h-5 w-5')
-
-        <span>{{ $label }}</span>
-    </div>
-</div>
+<x-cachet::badge :color="$color" :label="$label" :icon="$icon" />

resources/views/components/incident.blade.php

@@ -13,7 +13,7 @@
             'rounded-lg' => $incident->incidentUpdates->isEmpty(),
         ])>
             <div class="text-xs font-medium">{{ $incident->components->pluck('name')->join(', ') }}</div>
-            <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse">
+            <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse items-center">
                 <div class="flex flex-col flex-1">
                     <h3 class="max-w-full text-base font-semibold break-words sm:text-xl">
                         <a href="{{ route('cachet.status-page.incident', $incident) }}">{{ $incident->name}}</a>