wip badge

laravel_app/app/Livewire/Components/Badge.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Livewire\Components;
+
+use App\Enums\Status;
+use Livewire\Component;
+
+class Badge extends Component
+{
+    public array $colorClasses;
+    public $status;
+    public $type;
+    public int $id;
+    public $listeners = [
+        'Badge:refresh' => '$refresh',
+    ];
+
+    public function mount(string $status = null, $id = 0,$type = null)
+    {
+        $this->type = $type;
+        $this->id ??= $id ;
+        $this->status = Status::tryFrom($status) ?? Status::Success;
+        $this->colorClasses = match($this->status) {
+            Status::Success => ['bg' => 'bg-green-100', 'text' => 'text-green-700'],
+            Status::Failed => ['bg' => 'bg-red-100', 'text' => 'text-red-700'],
+            Status::Pending => ['bg' => 'bg-gray-100', 'text' => 'text-gray-600'],
+        };
+    }
+    public function render()
+    {
+        return view('livewire.components.badge');
+    }
+}

laravel_app/resources/views/livewire/components/badge.blade.php

@@ -0,0 +1,11 @@
+<span  class="inline-flex items-center rounded-md {{ $colorClasses['bg'] }} px-1.5 py-0.5 text-xs font-medium {{ $colorClasses['text'] }}"
+      @if($this->type)
+          x-init="Echo.private(`{{$this->type}}.@js($id)`).listen('Project{{ucfirst($this->type)}}Status', (e) => {
+                                                console.log(e.project{{ucfirst($this->type)}}.status);
+                                                $wire.dispatch('Badge:refresh');
+                                            });"
+      x-destroy="Echo.leaveChannel(`{{$this->type}}.@js($id)`);"
+      @endif
+>
+    {{ $status }}
+</span>