From 335ac6d31cf7eae4f9d7e9f4fb5234c3d3468b76 Mon Sep 17 00:00:00 2001
From: dvelo <52332868+DeveloLongScript@users.noreply.github.com>
Date: Sun, 16 Feb 2025 10:10:11 -0600
Subject: [PATCH] feat: green/red associated with averages

---
 .../feat/server-list/statistics.tsx           | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/www/src/components/feat/server-list/statistics.tsx b/apps/www/src/components/feat/server-list/statistics.tsx
index 500722e..2ce00c6 100644
--- a/apps/www/src/components/feat/server-list/statistics.tsx
+++ b/apps/www/src/components/feat/server-list/statistics.tsx
@@ -66,7 +66,17 @@ export function Statistics({
           </Tooltip>
         </strong>
         <span className="text-lg flex items-center gap-1">
-          {totalPlayers}
+          <span
+            className={
+              !averagesLoading && !error
+                ? (averages?.totalPlayerAverage as number) > totalPlayers
+                  ? "text-red-400"
+                  : "text-green-400"
+                : ""
+            }
+          >
+            {totalPlayers}
+          </span>
           <AnimatePresence>
             {!averagesLoading && !error && (
               <motion.span
@@ -99,7 +109,17 @@ export function Statistics({
           </Tooltip>
         </strong>
         <span className="text-lg flex items-center gap-1">
-          {totalServers}
+          <span
+            className={
+              !averagesLoading && !error
+                ? (averages?.totalServerAverage as number) > totalServers
+                  ? "text-red-400"
+                  : "text-green-400"
+                : ""
+            }
+          >
+            {totalServers}
+          </span>
           <AnimatePresence>
             {!averagesLoading && !error && (
               <motion.span
@@ -117,7 +137,7 @@ export function Statistics({
       </Material>
       <Material className="gap-2">
         <strong>Top Server</strong> <br />
-        <span className="text-lg">{topServer.name}</span>
+        <span className="text-lg"> {topServer.name}</span>
       </Material>
     </div>
   );