Refactor individual badge components into one

Author: jbrooksuk

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

@@ -21,9 +21,9 @@
         </div>
 
         @if ($component->incidents_count > 0)
-        <a href="{{ route('cachet.status-page.incident', [$component->incidents->first()]) }}"><x-cachet::component-badge :type="$component->status" /></a>
+        <a href="{{ route('cachet.status-page.incident', [$component->incidents->first()]) }}"><x-cachet::badge :status="$component->status" /></a>
         @else
-        <x-cachet::component-badge :type="$status" />
+        <x-cachet::badge :status="$status" />
         @endif
     </div>
 </li>

resources/views/components/component.blade.php

@@ -35,7 +35,7 @@
                     </span>
                 </div>
                 <div class="flex justify-start sm:justify-end">
-                    <x-cachet::incident-badge :type="$incident->status" />
+                    <x-cachet::badge :status="$incident->status" />
                 </div>
             </div>
         </div>

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

@@ -13,7 +13,7 @@
                     </span>
                     </div>
                     <div class="flex justify-start sm:justify-end">
-                        <x-cachet::schedule-badge :schedule="$schedule" />
+                        <x-cachet::badge :status="$schedule->status" />
                     </div>
                 </div>
                 <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $schedule->formattedMessage() !!}</div>

resources/views/components/incident.blade.php

@@ -2,6 +2,7 @@
 
 namespace Cachet\Enums;
 
+use Filament\Support\Colors\Color;
 use Filament\Support\Contracts\HasColor;
 use Filament\Support\Contracts\HasIcon;
 use Filament\Support\Contracts\HasLabel;
@@ -46,9 +47,9 @@ public function getLabel(): string
     public function getColor(): string|array|null
     {
         return match ($this) {
-            self::upcoming => 'info',
-            self::in_progress => 'warning',
-            self::complete => 'success',
+            self::upcoming => Color::Blue,
+            self::in_progress => Color::Amber,
+            self::complete => Color::Green,
         };
     }
 

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

@@ -2,6 +2,7 @@
 
 namespace Cachet\Enums;
 
+use Filament\Support\Colors\Color;
 use Filament\Support\Contracts\HasColor;
 use Filament\Support\Contracts\HasIcon;
 use Filament\Support\Contracts\HasLabel;
@@ -25,9 +26,9 @@ public function getLabel(): ?string
     public function getColor(): string|array|null
     {
         return match ($this) {
-            self::operational => 'success',
-            self::partial_outage => 'warning',
-            self::major_outage => 'danger',
+            self::operational => Color::Green,
+            self::partial_outage => Color::Amber,
+            self::major_outage => Color::Red,
         };
     }
 

resources/views/components/schedule.blade.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Cachet\View\Components;
+
+use Closure;
+use Filament\Support\Contracts\HasColor;
+use Filament\Support\Contracts\HasIcon;
+use Filament\Support\Contracts\HasLabel;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Badge extends Component
+{
+    public function __construct(public readonly HasLabel&HasColor&HasIcon $status)
+    {
+        //
+    }
+
+    public function render(): View|Closure|string
+    {
+        return view('cachet::components.badge', [
+            'color' => $this->status->getColor(),
+            'label' => $this->status->getLabel(),
+            'icon' => $this->status->getIcon(),
+        ]);
+    }
+}