Issue 16 create progress bar component

client/src/components/ui/SchedulePage/index.tsx

@@ -6,8 +6,6 @@ import EventCard from "./EventCard";
 export default function SchedulePage() {
   return (
     <div className="container mx-auto px-4 py-8">
-      <ProgressBar pageName="schedule" />
-
       <p className="medium-lg pt-8">Our next competition is: </p>
       <p className="subtitle pb-8 font-bold">Monday - July 9th, 2025</p>
 

client/src/components/ui/progress.tsx

@@ -1,68 +1,106 @@
 import Image from "next/image";
-import { title } from "process";
-import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { getPageConfigByName } from "../../config/pages";
 
 export default function ProgressBar({ pageName }: { pageName: string }) {
-  let progress = 0;
-  let titleName = "";
-  switch (pageName) {
-    case "schedule":
-      progress = 0;
-      titleName = "Drone Competition Schedule";
-      break;
-    case "format-rules":
-      progress = 25;
-      titleName = "Format Rules";
-      break;
-    case "leaderboard":
-      titleName = "Leaderboard";
-      progress = 50;
-      break;
-    case "sponsor-guest":
-      titleName = "Sponsor & Guest";
-      progress = 75;
-      break;
-  }
+  const [progressWidth, setProgressWidth] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const previousPageRef = useRef<string>("");
+  const previousProgressRef = useRef<number>(0);
+  const isFirstRenderRef = useRef<boolean>(true);
+
+  const pageConfig = getPageConfigByName(pageName);
+  const progress = pageConfig?.progress || 0;
+  const titleName = pageConfig?.title || "";
+
+  useEffect(() => {
+    const updateProgress = () => {
+      let targetProgress = progress;
+
+      if (pageName === "leaderboard") {
+        targetProgress = window.innerWidth >= 768 ? 90 : 80;
+      }
+
+      if (isFirstRenderRef.current) {
+        setProgressWidth(0);
+        setIsAnimating(true);
+        setTimeout(() => {
+          setProgressWidth(targetProgress);
+          previousProgressRef.current = targetProgress;
+          previousPageRef.current = pageName;
+          isFirstRenderRef.current = false;
+        }, 10);
+      } else if (previousPageRef.current !== pageName) {
+        setIsAnimating(false);
+        setProgressWidth(previousProgressRef.current);
+
+        setTimeout(() => {
+          setIsAnimating(true);
+          setProgressWidth(targetProgress);
+          previousProgressRef.current = targetProgress;
+          previousPageRef.current = pageName;
+        }, 10);
+      } else {
+        setProgressWidth(targetProgress);
+        previousProgressRef.current = targetProgress;
+      }
+    };
+
+    updateProgress();
+    window.addEventListener("resize", updateProgress);
+    return () => window.removeEventListener("resize", updateProgress);
+  }, [pageName, progress]);
+
+  useEffect(() => {
+    if (isAnimating) {
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isAnimating]);
 
   return (
     <div>
-      <div className="customerBar w-full flex-col justify-center gap-2">
-        <div className="mb-10 flex items-center justify-center">
-          <a className="title-large text-center text-[2.5rem] font-bold text-dark">
+      <div className="w-full flex-col justify-center">
+        <div className="mb-4 flex items-center justify-center">
+          <h1 className="title-large text-center text-[30px] text-dark md:text-[50px] lg:text-[60px]">
             {titleName}
-          </a>
+          </h1>
         </div>
-        <div className="flex flex-1">
+        <div className="flex flex-1 items-center">
           <div
             className="flex-shrink-0"
             style={{
-              width: `${progress}%`,
-              transition: "width 3s ease-in-out",
+              width: `${progressWidth}%`,
+              transition: isAnimating ? "width 3s ease-in-out" : "none",
             }}
           />
-          <div>
+          <div className="flex-shrink-0">
             <Image
-              src="/Drone.svg"
+              src="/drone.svg"
               alt="Drone"
-              width="50"
-              height="20"
-              className="object-contain"
+              width="30"
+              height="12"
+              className="object-contain md:h-[16px] md:w-[40px] lg:h-[20px] lg:w-[50px]"
             />
           </div>
 
-          <div className="ml-auto">
+          <div className="ml-auto flex-shrink-0">
             <Image
               src="/FinishFlag.svg"
               alt="Finish Flag"
-              width="50"
-              height="20"
-              className="object-contain"
+              width="20"
+              height="8"
+              className="object-contain md:h-[12px] md:w-[30px] lg:h-[20px] lg:w-[50px]"
             />
           </div>
         </div>
 
         <div className="flex w-full">
-          <div className="h-[2px] w-full bg-black" />
+          <div className="h-[2px] w-full bg-dark" />
         </div>
       </div>
     </div>

client/src/config/pages.ts

@@ -0,0 +1,46 @@
+export interface PageConfig {
+  path: string;
+  name: string;
+  title: string;
+  progress: number;
+}
+
+export const PAGES_CONFIG: PageConfig[] = [
+  {
+    path: "/schedule",
+    name: "schedule",
+    title: "Drone Competition Schedule",
+    progress: 0,
+  },
+  {
+    path: "/format-rules",
+    name: "format-rules",
+    title: "Format & Rules",
+    progress: 30,
+  },
+  {
+    path: "/guests-sponsors",
+    name: "guests-sponsors",
+    title: "Guests & Sponsors",
+    progress: 60,
+  },
+  {
+    path: "/leaderboard",
+    name: "leaderboard",
+    title: "Leaderboard",
+    progress: 80,
+  },
+];
+
+export const getPageConfigByPath = (path: string): PageConfig | null => {
+  return PAGES_CONFIG.find((page) => page.path === path) || null;
+};
+
+export const getPageConfigByName = (name: string): PageConfig | null => {
+  return PAGES_CONFIG.find((page) => page.name === name) || null;
+};
+
+export const getPageName = (path: string): string | null => {
+  const config = getPageConfigByPath(path);
+  return config ? config.name : null;
+};

client/src/pages/_app.tsx

@@ -9,9 +9,12 @@ import {
   Plus_Jakarta_Sans,
   Work_Sans,
 } from "next/font/google";
+import { useRouter } from "next/router";
 
 import Footer from "../components/ui/footer";
 import Navbar from "../components/ui/navbar";
+import ProgressBar from "../components/ui/progress";
+import { getPageName } from "../config/pages";
 
 const fontMontserrat = Montserrat({
   subsets: ["latin"],
@@ -37,16 +40,27 @@ const fontFugazOne = Fugaz_One({
 const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  const currentPageName = getPageName(router.pathname);
+
   return (
     <div
       className={`${fontMontserrat.variable} ${fontPlusJakartaSans.variable} ${fontWorkSans.variable} ${fontFugazOne.variable}`}
     >
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <Navbar />
-        <main className="w-full pt-16">
-          <Component {...pageProps} />
-        </main>
+        <div className="w-full">
+          <main className="mx-auto flex min-h-screen max-w-7xl flex-col items-center gap-4 p-24">
+            {currentPageName && (
+              <div className="mt-4 w-full justify-center">
+                <ProgressBar pageName={currentPageName} />
+              </div>
+            )}
+            <Component {...pageProps} />
+          </main>
+        </div>
       </QueryClientProvider>
       <Footer />
     </div>

client/src/pages/format-rules.tsx

@@ -2,7 +2,6 @@ import { NextPage } from "next";
 import Head from "next/head";
 
 import CheckList from "../components/ui/FormatRules/CheckList";
-import Navbar from "../components/ui/navbar";
 import ProgressBar from "../components/ui/progress";
 
 // Style constants definition
@@ -106,9 +105,6 @@ const FormatRulesPage: NextPage = () => {
           <div className="mx-auto px-5 py-10 md:px-12">
             {/* Hero Section */}
             <div className="mb-8 text-center">
-              {/* ProgressBar Component replaces the title */}
-              <ProgressBar pageName="format-rules" />
-
               <ContentText className="body-lg">
                 Complete guide to the 2025 WRC Drone Speed Challenge. Each match
                 is a<strong> 3-minute </strong>2v2 team competition with two

client/src/pages/guests-sponsors.tsx

@@ -46,12 +46,6 @@ const SponsorsAndGuest = () => {
 
   return (
     <div className="min-h-screen bg-background">
-      {/* Page title */}
-      <div className="pt-20 text-center">
-        <h1 className={`font-montserrat text-6xl font-semibold leading-none`}>
-          Guests & Sponsors
-        </h1>
-      </div>
       {/* Special Guests & Sponsors Section */}
       {loading ? (
         <p className="text-center text-gray-500">Loading...</p>

client/src/pages/leaderboard.tsx

@@ -5,18 +5,6 @@ import List from "../components/ui/Leaderboard/List";
 export default function LeaderboardPage() {
   return (
     <div className="flex min-h-screen flex-col items-center bg-light pt-8">
-      <div>
-        <h1 className="title-large text-center font-bold">Leaderboard</h1>
-        <div className="relative mx-auto h-[80px] w-[1100px]">
-          <Image
-            src="/ProgressBar4.svg"
-            alt="Progress Bar"
-            fill
-            className="object-contain"
-            priority
-          />
-        </div>
-      </div>
       <div className="">
         <List />
       </div>

client/src/styles/globals.css

@@ -202,3 +202,12 @@
     @apply mb-2 flex h-16 w-16 items-center justify-center rounded-full;
   }
 }
+
+@layer components {
+  .nav-link {
+    @apply text-dark transition-colors duration-200 hover:text-primary;
+  }
+  .nav-link-active {
+    @apply text-primary;
+  }
+}

client/tailwind.config.ts

@@ -19,6 +19,9 @@ const config = {
       },
     },
     extend: {
+      screens: {
+        lg: "1028px",
+      },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
         montserrat: ["var(--font-montserrat)", ...fontFamily.sans],