Refactor: used routes from constants

src/components/layout/header.jsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 import { portalURL } from "@/constants";
-import { hallOfFame } from "@/constants/routes";
+import { HALL_OF_FAME } from "@/constants/routes";
 import { useBreakpoint } from "@/hooks";
 import { BashawayLeaderboard } from "@/icons";
 import { AnimatedSwitcher, Button } from "@sliit-foss/bashaway-ui/components";
@@ -19,9 +19,10 @@ const Header = ({ className }) => {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   const breakpoints = useBreakpoint();
+
   const { pathname } = useLocation();
 
-  const isHallOfFame = pathname === hallOfFame;
+  const isHallOfFame = pathname === HALL_OF_FAME;
 
   return (
     <header

src/constants/index.js

@@ -1,2 +1,3 @@
 export * from "./hyperlinks";
 export * from "./socials";
+export * from "./routes";

src/constants/routes.js

@@ -1 +1,2 @@
-export const hallOfFame = "/hall-of-fame";
+export const HOME = "/";
+export const HALL_OF_FAME = "/hall-of-fame";

src/routes/index.jsx

@@ -1,14 +1,15 @@
 import { Route, Routes, useLocation } from "react-router-dom";
 import { AnimatePresence } from "framer-motion";
+import { HALL_OF_FAME, HOME } from "@/constants";
 import { HallOfFame, Home, NotFound } from "@/pages";
 
 const AnimatedRoutes = () => {
   const location = useLocation();
   return (
     <AnimatePresence>
       <Routes location={location}>
-        <Route path="/" element={<Home />} />
-        <Route path="/hall-of-fame" element={<HallOfFame />} />
+        <Route path={HOME} element={<Home />} />
+        <Route path={HALL_OF_FAME} element={<HallOfFame />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
     </AnimatePresence>