Update UI

1 files changed, 49 insertions, 7 deletions

diff --git a/app/src/components/Navbar.tsx b/app/src/components/Navbar.tsx
index 5107bf4..53c1f52 100644
--- a/app/src/components/Navbar.tsx
+++ b/app/src/components/Navbar.tsx
@@ -1,21 +1,63 @@
+import { useState, useEffect } from 'react';
 import styles from '../styles/Navbar.module.css';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleUp, faCircleDown } from '@fortawesome/free-solid-svg-icons';
 
 function Navbar() {
+  const [isOnline, setIsOnline] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const checkAPIStatus = async () => {
+      try {
+        const res = await fetch('/api/ping');
+
+        if (res.status === 200) {
+          setIsOnline(true);
+        } else {
+          setIsOnline(false);
+        }
+      } catch (error) {
+        setIsOnline(false);
+      }
+    };
+
+    checkAPIStatus();
+  });
+
   return (
     <div className={styles.navbar}>
-      <div className={styles.navbarLeft}>
+      <div className={styles.left}>
         <Link to={'/login'}>
-          <a className={styles.navbarLink}>Login</a>
+          <a className={styles.link}>Login</a>
         </Link>
         <Link to={'/signup'}>
-          <a className={styles.navbarLink}>Signup</a>
+          <a className={styles.link}>Signup</a>
         </Link>
       </div>
-      <div className={styles.navbarRight}>
-        <Link to={'/status'}>
-          <a className={styles.navbarLink}>API Status</a>
-        </Link>
+      <div className={styles.right}>
+        <a
+          className={styles.link}
+          title={
+            isOnline === null
+              ? 'Loading...'
+              : isOnline
+              ? 'API is online'
+              : 'API is offline'
+          }
+        >
+          API Status:{' '}
+          {isOnline === null ? (
+            'Loading...'
+          ) : isOnline ? (
+            <FontAwesomeIcon icon={faCircleUp} className={styles.circleUp} />
+          ) : (
+            <FontAwesomeIcon
+              icon={faCircleDown}
+              className={styles.circleDown}
+            />
+          )}
+        </a>
       </div>
     </div>
   );