final changes for the loading state

src/App.tsx

@@ -1,37 +1,35 @@
 import "./App.css";
 // import BrainIcon from './assets/brain_ai.svg';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { Categories, Login, NotFound, Trivia } from "./pages";
+import { useAuth0 } from "@auth0/auth0-react";
+import { Loader } from "./components";
 
 // import { Coin, Header, Hero, Logo, Trivia } from "./components/index";
 
 function App() {
+  const { isLoading, isAuthenticated } = useAuth0();
+
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" index element={<Login />} />
-        <Route path="/categories" index element={<Categories />} />
-        <Route path="/trivia" element={<Trivia />} />
-        <Route path="*" index element={<NotFound />} />
-      </Routes>
-    </BrowserRouter>
-    // <div className="flex flex-col w-full items-center justify-center text-black">
-    //   <Header>
-    //     <div className="flex justify-between w-full">
-    //       <Logo />
-    //       <Coin />
-    //     </div>
-    //   </Header>
-    //   <Hero>
-    //     <div className="flex items-center">
-    //       <img className="border border-black rounded-full p-4" src={BrainIcon} />
-    //       <span className="text-shadow-md text-6xl font-bold">&nbsp;trivia.ai</span>
-    //     </div>
-    //   </Hero>
-    //   <div className="flex">
-    //     <Trivia />
-    //   </div>
-    // </div>
+    <>
+      {isLoading && <Loader />}
+      {!isLoading && (
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Login />} />
+            <Route
+              path="/categories"
+              element={isAuthenticated ? <Categories /> : <Navigate to="/" />}
+            />
+            <Route
+              path="/trivia"
+              element={isAuthenticated ? <Trivia /> : <Navigate to="/" />}
+            />
+            <Route path="*" index element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      )}
+    </>
   );
 }
 

src/components/app-header/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Header from "../header";
+import { BrainIcon } from "../../assets";
+import Auth0LogoutButton from "../auth0-logout-button";
+import { useNavigate } from "react-router-dom";
+
+const AppHeader: React.FC = () => {
+  const navigate = useNavigate();
+
+  const onLogout = () => {
+    localStorage.clear();
+    navigate("/");
+  };
+
+  return (
+    <Header>
+      <div className="flex justify-between w-full">
+        <div className="flex space-x-2 items-center justify-center">
+          <img
+            onClick={() => navigate("/categories")}
+            className="border border-black rounded-full p-1 h-10 cursor-pointer"
+            src={BrainIcon}
+          />
+          <div className="flex flex-col text-left">
+            <span className="text-shadow-md font-bold">trivia.ai</span>
+            <span className="text-xs">Endless Knowledge</span>
+          </div>
+        </div>
+        <div>
+          <Auth0LogoutButton onLogout={onLogout} />
+        </div>
+      </div>
+    </Header>
+  );
+};
+
+export default AppHeader;

src/components/auth0-login-button/index.tsx

@@ -22,7 +22,7 @@ const Auth0LoginButton: React.FC<Auth0LoginButtonProps> = ({ onLogin }) => {
   return (
     <div>
       <button
-        className="bg-white border border-black w-full hover:bg-black hover:text-white"
+        className="px-4 bg-white text-black border border-black py-1 hover:bg-black hover:text-white"
         disabled={isAuthenticated}
         onClick={handleLogin}
       >

src/components/auth0-logout-button/index.tsx

@@ -21,7 +21,11 @@ const Auth0LogoutButton: React.FC<Auth0LogoutButtonProps> = ({ onLogout }) => {
 
   return (
     <div>
-      <button disabled={!isAuthenticated} onClick={handleLogout}>
+      <button
+        disabled={!isAuthenticated}
+        onClick={handleLogout}
+        className="px-4 bg-white text-black border border-black py-1 hover:bg-black hover:text-white"
+      >
         Logout
       </button>
     </div>

src/components/header/index.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from "react";
 
 const Header: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="absolute top-0 left-0 w-full items-center flex p-1">
+    <div className="absolute top-0 left-0 w-full items-center flex p-4">
       {children}
     </div>
   );

src/components/index.ts

@@ -1,3 +1,4 @@
+import AppHeader from "./app-header";
 import Auth0LoginButton from "./auth0-login-button";
 import Auth0LogoutButton from "./auth0-logout-button";
 import Coin from "./coin";
@@ -7,4 +8,5 @@ import Loader from "./loader";
 import Logo from "./logo";
 import Trivia from "./trivia";
 
-export { Auth0LoginButton, Hero, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo };
+
+export { Auth0LoginButton, Hero, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo, AppHeader };

src/components/loader/index.tsx

@@ -6,7 +6,7 @@ const Loader: React.FC = () => {
       <div className="flex flex-col items-center justify-center h-full mt-20 p-20">
         <div className="w-12 h-12 border-t-4 border-secondary dark:border-primary rounded-full animate-spin"></div>
         <p className="text-secondary dark:text-primary font-semibold mt-10">
-          Getting the Next Question
+          Sit Tight! Loading
         </p>
       </div>
     </>

src/index.css

@@ -43,20 +43,12 @@ h1 {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
   :root {

src/pages/Categories.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { getTriviaCategoriesFromGemini } from "../services/gemini";
 import { useNavigate } from "react-router-dom";
+import { AppHeader, Loader } from "../components";
 
 const Categories: React.FC = () => {
   const [categories, setCategories] = useState<string[]>(
     (JSON.parse(localStorage.getItem("categories") as string) as string[]) || []
   );
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const navigate = useNavigate();
 
@@ -15,11 +17,13 @@ const Categories: React.FC = () => {
     localStorage.removeItem("selectedCategories");
 
     if (!categories.length) {
+      setIsLoading(true);
       getTriviaCategoriesFromGemini().then((result) => {
         const sortedResults = result.sort();
 
         localStorage.setItem("categories", JSON.stringify(sortedResults));
         setCategories(sortedResults);
+        setIsLoading(false);
       });
     }
   }, []);
@@ -48,40 +52,50 @@ const Categories: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col justify-center items-center w-full">
-      <span className="text-4xl font-bold">Categories</span>
-      <span className="mt-1">Choose the one(s) you think you are good at</span>
-      <div className="flex flex-wrap p-10 justify-center">
-        {categories.map((category, _index) => {
-          return (
-            <button
-              key={_index}
-              className={`px-10 py-2 m-1 border border-black ${
-                selectedCategories.includes(category)
-                  ? "bg-black text-white"
-                  : ""
-              } hover:bg-black hover:text-white shadow-sm`}
-              onClick={() => onClickCategory(category)}
-            >
-              {category}
-            </button>
-          );
-        })}
+    <>
+      <AppHeader />
+      <div className="flex flex-col justify-center items-center w-full">
+        <span className="text-4xl font-bold">Categories</span>
+        <span className="mt-1">
+          Pick Your Strengths and Showcase Your Knowledge
+        </span>
+        {isLoading && <Loader />}
+        {!isLoading && (
+          <>
+            <div className="flex flex-wrap justify-center mt-5">
+              {categories.map((category, _index) => {
+                return (
+                  <button
+                    key={_index}
+                    className={`px-10 py-2 m-1 border border-black ${
+                      selectedCategories.includes(category)
+                        ? "bg-black text-white"
+                        : ""
+                    } hover:bg-black hover:text-white shadow-sm`}
+                    onClick={() => onClickCategory(category)}
+                  >
+                    {category}
+                  </button>
+                );
+              })}
+            </div>
+            <div className="mt-10 flex">
+              <button
+                className="px-10 py-3 m-1 border border-black bg-black text-white shadow-lg tracking-widest flex items-center"
+                onClick={onGetStarted}
+              >
+                Get Started{""}
+                {!!selectedCategories.length && (
+                  <span className="bg-white text-black rounded-full w-6 h-6 items-center justify-center ml-2">
+                    {selectedCategories.length ? selectedCategories.length : ""}
+                  </span>
+                )}
+              </button>
+            </div>
+          </>
+        )}
       </div>
-      <div className="mt-10 flex">
-        <button
-          className="px-10 py-3 m-1 border border-black bg-black text-white shadow-lg tracking-widest flex items-center"
-          onClick={onGetStarted}
-        >
-          Get Started{""}
-          {!!selectedCategories.length && (
-            <span className="bg-white text-black rounded-full w-6 h-6 items-center justify-center ml-2">
-              {selectedCategories.length ? selectedCategories.length : ""}
-            </span>
-          )}
-        </button>
-      </div>
-    </div>
+    </>
   );
 };
 

src/pages/Login.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from "react";
-import { Auth0LoginButton, Logo } from "../components";
+import { Auth0LoginButton } from "../components";
 import { useNavigate } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
+import { BrainIcon } from "../assets/index";
 
 const Login: React.FC = () => {
   const navigate = useNavigate();
@@ -18,8 +19,14 @@ const Login: React.FC = () => {
   }, []);
 
   return (
-    <div className="border justify-center items-center p-20 space-y-10 shadow-md">
-      <Logo />
+    <div className="flex flex-col justify-center items-center">
+      <img className="border border-black rounded-full p-4" src={BrainIcon} />
+      <div className="flex flex-col mb-10">
+        <span className="text-shadow-md text-6xl font-bold">
+          &nbsp;trivia.ai
+        </span>
+        <span>Discover Smart, Fun & Endless Knowledge</span>
+      </div>
       <Auth0LoginButton onLogin={onLogin} />
     </div>
   );