From 77b60081504a6a729482bcdbb2ae01d176d656b3 Mon Sep 17 00:00:00 2001
From: = <kushal.sentientgeeks@outlook.com>
Date: Wed, 13 May 2026 09:48:54 +0000
Subject: [PATCH] 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

---
 .../components/dashboard-stats.blade.php      |  8 +++----
 .../connected-services/⚡all.blade.php        |  2 +-
 .../views/components/shared/badge.blade.php   |  2 +-
 .../views/components/shared/button.blade.php  | 22 +++++++++++++++----
 .../views/components/shared/card.blade.php    |  4 ++--
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/resources/views/components/dashboard-stats.blade.php b/resources/views/components/dashboard-stats.blade.php
index 88d5e1d..5925d3c 100644
--- a/resources/views/components/dashboard-stats.blade.php
+++ b/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>
diff --git a/resources/views/components/dashboard/connected-services/⚡all.blade.php b/resources/views/components/dashboard/connected-services/⚡all.blade.php
index a0526ba..2c4a33c 100644
--- a/resources/views/components/dashboard/connected-services/⚡all.blade.php
+++ b/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>
diff --git a/resources/views/components/shared/badge.blade.php b/resources/views/components/shared/badge.blade.php
index 6b322e0..1ca2b8d 100644
--- a/resources/views/components/shared/badge.blade.php
+++ b/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>
diff --git a/resources/views/components/shared/button.blade.php b/resources/views/components/shared/button.blade.php
index b38d468..54a6752 100644
--- a/resources/views/components/shared/button.blade.php
+++ b/resources/views/components/shared/button.blade.php
@@ -1,6 +1,13 @@
-@props(['icon' => 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'])}}>
-    <div class="gap-2 flex items-center">
+@props(['icon' => null, 'link' => null])
+@if($link)
+    <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
diff --git a/resources/views/components/shared/card.blade.php b/resources/views/components/shared/card.blade.php
index aec62a1..bb76e5f 100644
--- a/resources/views/components/shared/card.blade.php
+++ b/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