code fixes and adding modal

src/components/UI/Header.tsx

@@ -5,10 +5,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear, faListCheck } from "@fortawesome/free-solid-svg-icons";
 import type { VersionFieldType } from "../../types/types";
 
-async function fetchVersions(signal?: AbortSignal): Promise<VersionFieldType> {
-  const res = await fetch("http://192.168.75.11/api/versions", { signal });
-  if (!res.ok) throw new Error(`HTTP ${res.status}`);
-  return res.json();
+async function fetchVersions(
+  signal?: AbortSignal
+): Promise<VersionFieldType | undefined> {
+  try {
+    const res = await fetch("http://192.168.75.11/api/versions", { signal });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return res.json();
+  } catch (error) {
+    console.log(error);
+    return undefined;
+  }
 }
 
 const pad = (n: number) => String(n).padStart(2, "0");
@@ -33,10 +40,14 @@ export default function Header() {
     const ac = new AbortController();
     fetchVersions(ac.signal)
       .then((data) => {
-        const serverMs = normalizeToMs(data.timeStamp);
+        if (!data) throw new Error("No data");
+        const serverMs = normalizeToMs(data?.timeStamp);
         setOffsetMs(serverMs - Date.now());
       })
-    return () => ac.abort();
+      .catch((err) => {
+        console.log(err);
+      });
+    return () => ac.abort("failed");
   }, []);
 
   React.useEffect(() => {
@@ -69,13 +80,14 @@ export default function Header() {
           <h2>Local: {localStr}</h2>
           <h2>UTC: {utcStr}</h2>
         </div>
-
-        <Link to={"/session-settings"}>
-          <FontAwesomeIcon className="text-white" icon={faListCheck} />
-        </Link>
-        <Link to={"/system-settings"}>
-          <FontAwesomeIcon className="text-white" icon={faGear} />
-        </Link>
+        <div className="flex flex-row space-x-2">
+          <Link to={"/session-settings"}>
+            <FontAwesomeIcon className="text-white" icon={faListCheck} />
+          </Link>
+          <Link to={"/system-settings"}>
+            <FontAwesomeIcon className="text-white" icon={faGear} />
+          </Link>
+        </div>
       </div>
     </div>
   );