Merge pull request #9 from Chesars/feat/clickable-stat-cards

Make stat cards clickable to navigate to relevant tabs

Author: Krish Dholakia

src/Main.svelte

@@ -251,22 +251,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}
@@ -650,6 +650,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 {