Global Component Library

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.turbo
 
 # Editor directories and files
 .vscode/*

main/package.json

@@ -12,6 +12,7 @@
     "prod": "vite build && vite preview"
   },
   "dependencies": {
+    "@sage/ui": "workspace:*",
     "@hookform/resolvers": "^4.1.3",
     "@microsoft/clarity": "^1.0.2",
     "@radix-ui/react-dialog": "^1.1.15",

main/src/components/ChatBotNavbar.tsx

@@ -1,112 +1,53 @@
-import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
-import { Route, MessagesSquare, MessageCirclePlus, UserRound } from "lucide-react";
-import { useEffect, useState } from "react";
+import { MessagesSquare } from "lucide-react";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import { useChatbot } from "../hooks/useChatbot";
-import MobileNavbar from './MobileNavbar';
+  DevEnvironmentBanner,
+  MobileNavbar,
+  NavBrand,
+  NavPrimaryLinks,
+  UserProfileMenu,
+} from "@sage/ui";
 import ChatSidebarContent from '@/components/chatbot/ChatSidebarContent';
+import { useRouteMode } from "../hooks/useRouteMode";
+import { PRIMARY_NAV_LINKS, MOBILE_NAV_LINKS } from "../lib/navLinks";
 
 const ENVIRONMENT = import.meta.env.VITE_ENVIRONMENT as string | undefined;
 
 const ChatBotNavbar = () => {
   const { user, logout, profilePicture } = useAuth();
-  const location = useLocation();
-  const { initialLoad } = useChatbot();
-
-  const [isInWebapp, setIsInWebapp] = useState(false);
-  useEffect(() => {
-    initialLoad();
-  }, []);
-
-  useEffect(() => {
-    if (location.pathname === "/" || location.pathname === "/login" || location.pathname === "/signup" || location.pathname === "/forgot-password") {
-      setIsInWebapp(false);
-    } else {
-      setIsInWebapp(true);
-    }
-  }, [location]);
+  const { isInWebapp } = useRouteMode();
+  const isDarkMode = !isInWebapp;
 
   return (
     <>
-      {/* Desktop navbar */}
-      {ENVIRONMENT === 'development' && (
-        <div className="fixed top-0 left-0 right-0 h-4 bg-purple-600 text-white text-center text-xs font-medium z-[200] shadow-sm flex items-center justify-center">
-          Dev Environment
-        </div>
-      )}
+      <DevEnvironmentBanner isDevelopment={ENVIRONMENT === 'development'} />
 
       <nav className={`
-        ${isInWebapp ? "bg-bglight border-b-[1px] shadow-sm" : undefined} 
+        ${isInWebapp ? "bg-bglight border-b-[1px] shadow-sm" : undefined}
         py-2.5 px-6 fixed w-full z-10 hidden md:block
         ${ENVIRONMENT === 'development' ? 'top-4' : 'top-0'}
       `}>
         <div className="flex items-center justify-between w-full">
-          <Link to="/" className="ml-0">
-            <img src={isInWebapp ? "/Sage_Logo_Dark.svg" : "/Sage_Logo_Light.svg"} alt="SAGE" className="h-8 w-auto" />
-          </Link>
+          <NavBrand isDarkMode={isDarkMode} />
           <ul className="flex items-center space-x-6 mr-0">
-            <li>
-              <Link to="/planner" className={`${isInWebapp ? "text-textdark hover:text-gray-500" : "text-textlight hover:text-gray-200"} flex items-center gap-2`}>
-                <Route className="stroke-accent" />
-                Plan your degree
-              </Link>
-            </li>
-            <li>
-              <Link to="/chatbot" className={`${isInWebapp ? "text-textdark hover:text-gray-500" : "text-textlight hover:text-gray-200"} flex items-center gap-2`}>
-                <MessageCirclePlus className="stroke-accent" />
-                Start a chat
-              </Link>
-            </li>
-            <li>
-              {user ? (
-                <DropdownMenu>
-                  <DropdownMenuTrigger>
-                    <div className="p-2 rounded-full">
-                      {profilePicture ? (
-                        <img referrerPolicy="no-referrer" src={profilePicture} data-clarity-mask="True" alt="Profile" className="w-9 h-9 rounded-full object-cover" />
-                      ) : (
-                        <UserRound className="stroke-textdark"/>
-                      )}
-                    </div>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent className="bg-bglight flex flex-col p-2 gap-2 mr-6 items-center rounded-sm">
-                    <DropdownMenuItem className="focus:bg-innercontainer w-full">
-                      <Link to="/profile" className="text-textdark hover:text-gray-700 flex flex-row w-full justify-start items-center gap-2">
-                        <UserRound className="stroke-accent" />
-                        Your Profile
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="focus:bg-innercontainer w-full">
-                      <button onClick={logout} className="bg-destructive text-textlight text-base px-6 py-1.5 rounded-full font-semibold hover:bg-red-700 transition duration-300">
-                        Sign Out
-                      </button>
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : (
-                <Link to="/login" className="bg-accent text-textdark text-base px-8 py-3 rounded-full font-semibold hover:bg-buttonhover transition duration-300">
-                  Login
-                </Link>
-              )}
-            </li>
+            <NavPrimaryLinks isDarkMode={isDarkMode} links={PRIMARY_NAV_LINKS} />
+            <UserProfileMenu user={user} logout={logout} profilePicture={profilePicture} />
           </ul>
         </div>
       </nav>
 
-      {/* Mobile navbar with chat sidebar */}
       <MobileNavbar
         isInWebapp={isInWebapp}
-        sidebarIcon={<MessagesSquare className={isInWebapp ? "stroke-textdark" : "stroke-textlight"} />}
+        isDarkMode={isDarkMode}
+        isDevelopment={ENVIRONMENT === 'development'}
+        user={user}
+        logout={logout}
+        sidebarIcon={<MessagesSquare className={isDarkMode ? "stroke-textlight" : "stroke-textdark"} />}
         sidebarContent={(onClose) => <ChatSidebarContent onClose={onClose} />}
+        navLinks={MOBILE_NAV_LINKS}
       />
     </>
   );
 };
 
-export default ChatBotNavbar;
+export default ChatBotNavbar;