feat[lar-137] Change count and indicator livewire component to volt component

feat:[lar-137] Change count and indicator livewire component to volt component

Author: cybersoldattech

resources/views/livewire/notification-count.blade.php

@@ -1,23 +1,19 @@
 <?php
 
-use Livewire\Volt\Component;
-use Livewire\Attributes\On;
+declare(strict_types=1);
 
-new class extends Component {
+use function Livewire\Volt\{on};
+use Illuminate\Support\Facades\Auth;
 
-    public function with(): array
-    {
-        return [
-            'count' => \Illuminate\Support\Facades\Auth::user()->unreadNotifications()->count(),
-        ];
-    }
+use function Livewire\Volt\{state};
 
-    #[On('NotificationMarkedAsRead')]
-    public function updateCount(int $count): int
-    {
-        return $count;
-    }
-} ?>
+state(['count' => Auth::user()->unreadNotifications()->count()]);
+
+on(['NotificationMarkedAsRead' => function (int $count) {
+    return $count;
+}]);
+
+?>
 
 <span class="rounded-full bg-green-100 px-3 text-base text-green-500">
     {{ $count }}

resources/views/livewire/notification-indicator.blade.php

@@ -1,27 +1,23 @@
 <?php
 
-use Livewire\Volt\Component;
-use Livewire\Attributes\On;
+declare(strict_types=1);
+
+use function Livewire\Volt\{on};
 use Illuminate\Support\Facades\Auth;
 
-new class extends Component {
+use function Livewire\Volt\{state};
+
+state(['hasNotification' => Auth::user()->unreadNotifications()->count() > 0 ]);
 
-    public function with(): array
-    {
-        return [
-            'hasNotification' =>  $this->setHasNotification(
-                Auth::user()->unreadNotifications()->count(), // @phpstan-ignore-line
-            ),
-        ];
-    }
+on(['NotificationMarkedAsRead' => function (int $count) {
+    return $count > 0 ;
+}]);
 
-    #[On('NotificationMarkedAsRead')]
-    public function setHasNotification(int $count): bool
-    {
-        return $count > 0;
-    }
-} ?>
+?>
 
 <span
-    class="{{ $hasNotification ? 'shadow-solid absolute right-0 top-0 block size-2 rounded-full bg-primary-600 text-white' : 'hidden' }}"
+    @class([
+        'hidden' => !$hasNotification,
+        'shadow-solid absolute right-0 top-0 block size-2 rounded-full bg-primary-600 text-white' => $hasNotification
+    ])
 ></span>