chore: component refactoring - badeg, button, card

- fix text truncation in badge component
- simplify tag rendering in button component
- remove padding in card component add space in actions

resources/views/components/dashboard-stats.blade.php

@@ -1,17 +1,17 @@
 <grid class="grid grid-cols-4 gap-x-4">
-    <x-shared.card >
+    <x-shared.card class="p-4">
         <p class="text-sm text-gray-400">Total Users</p>
         <p class="text-2xl">284</p>
     </x-shared.card>
-    <x-shared.card >
+    <x-shared.card class="p-4">
         <p class="text-sm text-gray-400">Active Roles</p>
         <p class="text-2xl">4</p>
     </x-shared.card>
-    <x-shared.card >
+    <x-shared.card class="p-4">
         <p class="text-sm text-gray-400">Services</p>
         <p class="text-2xl">8</p>
     </x-shared.card>
-    <x-shared.card >
+    <x-shared.card class="p-4">
         <p class="text-sm text-gray-400">Revoked Today</p>
         <p class="text-2xl">7</p>
     </x-shared.card>

resources/views/components/dashboard/connected-services/⚡all.blade.php

@@ -50,7 +50,7 @@ public function mount(): void
 
 <div class="flex overflow-x-auto gap-x-4">
     @foreach ($connectedServices as $service)
-        <x-shared.card class="min-w-60">
+        <x-shared.card class="min-w-60 p-4">
             <div class="flex space-x-4">
                 <div class="bg-blue-200 p-4 rounded-lg flex items-center justify-center max-h-10">
                     <svg role="img" class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>

resources/views/components/shared/badge.blade.php

@@ -1,3 +1,3 @@
 <span
-    {{$attributes->twMerge(['class'=> 'px-4 py-1 rounded-full bg-gray-200'])}}
+    {{$attributes->twMerge(['class'=> 'px-4 py-1 rounded-full bg-gray-200 truncate'])}}
 >{{ $slot }}</span>

resources/views/components/shared/button.blade.php

@@ -1,6 +1,13 @@
-@props(['icon' => null])
+@props(['icon' => null, 'link' => null])
-<button {{$attributes->twMerge(['class' => 'rounded-lg border border-gray-300 px-4 py-2 text-gray-700 active:scale-75 hover:bg-gray-100 transition duration-150 ease-in-out'])}}>
+@if($link)
-    <div class="gap-2 flex items-center">
+    <a href="{{$link}}"
+       wire:navigate.hover
+@else
+    <button
+        @endif
+        {{$attributes->twMerge(['class' => 'rounded-lg border border-gray-300 px-4 py-2 text-gray-700 active:scale-75 hover:bg-gray-100 transition duration-150 ease-in-out flex items-center justify-center min-w-20'])}}
+    />
+    <div class="gap-2 flex items-center in-data-loading:hidden">
         @if($icon)
             <span class="block">
             @svg($icon, 'w-4 h-4')
@@ -8,4 +15,11 @@
         @endif
         {{$slot}}
     </div>
-</button>
+    <div class="not-in-data-loading:hidden">
+        <x-lucide-loader class="animate-spin h-5"/>
+    </div>
+    @if($link)
+        </a>
+    @else
+        </button>
+@endif

resources/views/components/shared/card.blade.php

@@ -1,5 +1,5 @@
 @props(['title', 'icon', 'actions'])
-<div {{$attributes->twMerge('rounded-xl border  border-gray-200 p-4 shadow-xs bg-white')}}>
+<div {{$attributes->twMerge('rounded-xl border  border-gray-200 p-0 shadow-xs bg-white')}}>
     @isset($title)
         <div class="p-4 flex justify-between border-b border-gray-200">
             <h2 class="font-medium flex items-center gap-x-2">
@@ -8,7 +8,7 @@
                 @endisset
                 {{ __($title) }}
             </h2>
-            <div class="">
+            <div class="flex items-center gap-x-2">
                 @isset($actions)
                     {{$actions}}
                 @endisset