Banner update

realliance · Dec 21, 2023 · 40f6c27 · 40f6c27
1 parent 049f598
commit 40f6c27
Showing 1 changed file with 44 additions and 19 deletions.
diff --git a/frontend/src/pages/App.tsx b/frontend/src/pages/App.tsx
@@ -1,8 +1,8 @@
-import { Badge, DarkThemeToggle, Footer, Navbar } from "flowbite-react"
-import { beginAuthFlow, onRedirect } from "../util/oauth"
-import { useContext, useEffect, useMemo } from "react"
-import { Link, Outlet, useNavigation } from "react-router-dom";
-import { AuthContext } from "../contexts/AuthContext";
+import { Badge, DarkThemeToggle, Footer, Navbar } from 'flowbite-react';
+import { beginAuthFlow, onRedirect } from '../util/oauth';
+import { useContext, useEffect, useMemo } from 'react';
+import { Link, Outlet, useNavigation } from 'react-router-dom';
+import { AuthContext } from '../contexts/AuthContext';
 
 function App() {
   const { profile, loading, updateToken } = useContext(AuthContext);
@@ -18,36 +18,61 @@ function App() {
 
   const profileItem = useMemo(() => {
     if (loading) {
-      return <div className="w-32 h-8 mt-1 animate-pulse dark:bg-gray-600 bg-zinc-100 rounded" />
+      return (
+        <div className="w-32 h-8 mt-1 animate-pulse dark:bg-gray-600 bg-zinc-100 rounded" />
+      );
     } else if (profile) {
-      return <Navbar.Link as={Link} to={`/user/${profile.username}`}>{profile.displayName} {profile.admin && <Badge color="info">Admin</Badge> }</Navbar.Link>
+      return (
+        <Navbar.Link as={Link} to={`/user/${profile.username}`}>
+          {profile.displayName}{' '}
+          {profile.admin && <Badge color="info">Admin</Badge>}
+        </Navbar.Link>
+      );
     } else {
-      return <Navbar.Link href="#" onClick={() => beginAuthFlow()}>Login</Navbar.Link>
+      return (
+        <Navbar.Link href="#" onClick={() => beginAuthFlow()}>
+          Login
+        </Navbar.Link>
+      );
     }
   }, [profile, loading]);
 
   return (
     <div className="flex flex-col min-h-screen">
-      <Navbar fluid className="px-6 border border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700 mb-3">
+      <Navbar
+        fluid
+        className="px-6 border border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700 mb-3"
+      >
         <Navbar.Brand as={Link} href="/">
-          <img src="/reABackground.png" className="mr-3 h-6 sm:h-9 rounded" alt="Realliance Logo" />
-          <span className="self-center whitespace-nowrap text-xl font-bold dark:text-white">Realliance</span>
+          <img
+            src="/reABackground.png"
+            className="mr-3 h-6 sm:h-9 rounded"
+            alt="Realliance Logo"
+          />
+          <span className="self-center whitespace-nowrap text-xl font-bold dark:text-white mr-3">
+            Realliance Community
+          </span>
+          <Badge color="info">Under Construction</Badge>
         </Navbar.Brand>
         <Navbar.Toggle />
-        <Navbar.Collapse>
-          {profileItem}
-        </Navbar.Collapse>
+        <Navbar.Collapse>{profileItem}</Navbar.Collapse>
       </Navbar>
-      <div className={`mt-3 grow ${navigation.state === 'loading' ? "animate-pulse" : ""}`}>
+      <div
+        className={`mt-3 grow ${
+          navigation.state === 'loading' ? 'animate-pulse' : ''
+        }`}
+      >
         <Outlet />
       </div>
       <Footer container>
         <Footer.LinkGroup>
-          <Footer.Link href="#"><DarkThemeToggle /></Footer.Link>
+          <Footer.Link href="#">
+            <DarkThemeToggle />
+          </Footer.Link>
         </Footer.LinkGroup>
-    </Footer>
+      </Footer>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;