From 593e2a52eacc9434554ab89350582879d1e23f94 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 28 Apr 2024 15:49:10 -0600
Subject: [PATCH] Link on mobile as well

---
 web/src/components/navigation/Bottombar.tsx | 32 +++++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 38086892e..519730d99 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -51,7 +51,13 @@ function StatusAlertNav() {
   useEffect(() => {
     clearMessages("stats");
     potentialProblems.forEach((problem) => {
-      addMessage("stats", problem.text, problem.color);
+      addMessage(
+        "stats",
+        problem.text,
+        problem.color,
+        undefined,
+        problem.relevantLink,
+      );
     });
   }, [potentialProblems, addMessage, clearMessages]);
 
@@ -68,14 +74,22 @@ function StatusAlertNav() {
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="w-full flex items-center gap-2">
-              {messageArray.map(({ id, text, color }: StatusMessage) => (
-                <div key={id} className="flex items-center text-xs gap-2">
-                  <IoIosWarning
-                    className={`size-5 ${color || "text-danger"}`}
-                  />
-                  {text}
-                </div>
-              ))}
+              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
+                const message = (
+                  <div key={id} className="flex items-center text-xs gap-2">
+                    <IoIosWarning
+                      className={`size-5 ${color || "text-danger"}`}
+                    />
+                    {text}
+                  </div>
+                );
+
+                if (link) {
+                  return <a href={link}>{message}</a>;
+                } else {
+                  return message;
+                }
+              })}
             </div>
           ))}
         </div>