From e8e4e66c174bd869eb867747ba8e73a9c4ea49dd Mon Sep 17 00:00:00 2001
From: Chesars <cesarponce19544@gmail.com>
Date: Wed, 21 Jan 2026 11:42:43 -0300
Subject: [PATCH] Make stat cards clickable to navigate to relevant tabs

- Models Supported card navigates to Models tab
- Providers, Unique Endpoints, and Provider + Endpoint cards navigate to Providers tab
- Added cursor pointer and proper button styling
---
 src/Main.svelte | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/Main.svelte b/src/Main.svelte
index b8e01ba..2387bb5 100644
--- a/src/Main.svelte
+++ b/src/Main.svelte
@@ -233,22 +233,22 @@
   {#if !statsLoading}
     <div class="stats-section">
       <div class="stats-container">
-        <div class="stat-card">
+        <button class="stat-card" on:click={() => selectTab("models")}>
           <div class="stat-value">{modelCount}</div>
           <div class="stat-label">Models Supported</div>
-        </div>
-        <div class="stat-card">
+        </button>
+        <button class="stat-card" on:click={() => selectTab("providers")}>
           <div class="stat-value">{providerCount}</div>
           <div class="stat-label">Providers</div>
-        </div>
-        <div class="stat-card">
+        </button>
+        <button class="stat-card" on:click={() => selectTab("providers")}>
           <div class="stat-value">{endpointCount}</div>
           <div class="stat-label">Unique Endpoints</div>
-        </div>
-        <div class="stat-card">
+        </button>
+        <button class="stat-card" on:click={() => selectTab("providers")}>
           <div class="stat-value">{providerEndpointCount}</div>
           <div class="stat-label">Provider + Endpoint Combinations</div>
-        </div>
+        </button>
       </div>
     </div>
   {/if}
@@ -630,6 +630,9 @@
     padding: 0.875rem 0.75rem;
     text-align: center;
     transition: background-color 0.2s ease, border-color 0.2s ease;
+    cursor: pointer;
+    font-family: inherit;
+    width: 100%;
   }
 
   .stat-card:hover {