Custom notification badge create

app/Livewire/Messages.php

@@ -2,12 +2,13 @@
 
 namespace App\Livewire;
 
+use Illuminate\View\View;
 use Livewire\Component;
 
 class Messages extends Component
 {
-    public function render()
+    public function render(): View
     {
-        return view('livewire.messages');
+        return view('messages');
     }
 }

app/Livewire/Orders.php

@@ -2,12 +2,13 @@
 
 namespace App\Livewire;
 
+use Illuminate\View\View;
 use Livewire\Component;
 
 class Orders extends Component
 {
-    public function render()
+    public function render(): View
     {
-        return view('livewire.orders');
+        return view('orders');
     }
 }

resources/css/app.css

@@ -33,5 +33,5 @@ input:-webkit-autofill {
 }
 
 .custom-badge{
-    @apply absolute -top-0 -right-0 h-[12px] w-[12px] bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center;
+    @apply absolute top-1 right-1 h-[6px] w-[6px] bg-blue-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center ring ring-white;
 }

resources/views/layouts/navigation.blade.php

@@ -33,13 +33,12 @@
         </div>
     </div>
     <div class="navbar-end text-black/80 items-center">
-        <div class="btn btn-circle btn-sm btn-ghost relative center">
+        <div class="btn btn-circle bg-gray-100 btn-sm btn-ghost relative center">
             <i class="fas fa-envelope"></i>
             <span class="custom-badge">
-                3
             </span>
         </div>
-        <div class="btn btn-circle btn-sm btn-ghost relative ml-2 center">
+        <div class="btn btn-circle bg-gray-100 btn-sm btn-ghost relative ml-2 center">
             <i class="fas fa-bell-slash"></i>
             <!-- <i class="fas fa-bell"></i> -->
             <!-- <span class="custom-badge"> auth->notifications->unread() </span> -->