Linked progress bar to all pages, adjusted styling

Author: Shinetopia

client/src/components/ui/progress.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import { title } from "process";
 import * as React from "react";
 
 export default function ProgressBar({ pageName }: { pageName: string }) {
@@ -8,27 +7,27 @@ export default function ProgressBar({ pageName }: { pageName: string }) {
   switch (pageName) {
     case "schedule":
       progress = 0;
-      titleName = "Schedule";
+      titleName = "Drone Competition Schedule";
       break;
     case "format-rules":
-      progress = 25;
-      titleName = "Format Rules";
+      progress = 33;
+      titleName = "Format & Rules";
+      break;
+    case "guests-sponsors":
+      titleName = "Guests & Sponsors";
+      progress = 66;
       break;
     case "leaderboard":
       titleName = "Leaderboard";
-      progress = 50;
-      break;
-    case "sponsor-guest":
-      titleName = "Sponsor & Guest";
-      progress = 75;
+      progress = 90;
       break;
   }
 
   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">{titleName}</a>
+        <div className="mb-4 flex items-center justify-center">
+          <a className="title-large text-dark">{titleName}</a>
         </div>
         <div className="flex flex-1">
           <div
@@ -52,15 +51,15 @@ export default function ProgressBar({ pageName }: { pageName: string }) {
             <Image
               src="/FinishFlag.svg"
               alt="Finish Flag"
-              width="50"
-              height="20"
+              width="25"
+              height="10"
               className="object-contain"
             />
           </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/pages/_app.tsx

@@ -6,7 +6,6 @@ import type { AppProps } from "next/app";
 import { Montserrat, Plus_Jakarta_Sans, Work_Sans } from "next/font/google";
 
 import Footer from "../components/ui/footer";
-// import { cn } from "@/lib/utils";
 import Navbar from "../components/ui/navbar";
 
 const fontMontserrat = Montserrat({
@@ -33,6 +32,7 @@ export default function App({ Component, pageProps }: AppProps) {
     >
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
+        <Navbar />
         <div className="w-full">
           <main className="mx-auto flex min-h-screen max-w-7xl flex-col items-center gap-4 p-24">
             <Component {...pageProps} />

client/src/pages/format-rules.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { usePings } from "@/hooks/pings";
 
 import { Button } from "../components/ui/button";
+import ProgressBar from "../components/ui/progress";
 
 export default function Home() {
   const [clicked, setClicked] = useState(false);
@@ -12,7 +13,9 @@ export default function Home() {
 
   return (
     <>
-      <h1 className="title-large text-dark">Title Test</h1>
+      <div className="mt-4 w-full justify-center">
+        <ProgressBar pageName="format-rules" />
+      </div>
       <Button onClick={() => setClicked(true)}>
         {isLoading ? "Loading" : "Ping"}
       </Button>

client/src/pages/guests-sponsors.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { usePings } from "@/hooks/pings";
 
 import { Button } from "../components/ui/button";
+import ProgressBar from "../components/ui/progress";
 
 export default function Home() {
   const [clicked, setClicked] = useState(false);
@@ -12,7 +13,9 @@ export default function Home() {
 
   return (
     <>
-      <h1 className="title-large text-dark">Title Test</h1>
+      <div className="mt-4 w-full justify-center">
+        <ProgressBar pageName="guests-sponsors" />
+      </div>
       <Button onClick={() => setClicked(true)}>
         {isLoading ? "Loading" : "Ping"}
       </Button>

client/src/pages/leaderboard.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { usePings } from "@/hooks/pings";
 
 import { Button } from "../components/ui/button";
+import ProgressBar from "../components/ui/progress";
 
 export default function Home() {
   const [clicked, setClicked] = useState(false);
@@ -12,7 +13,9 @@ export default function Home() {
 
   return (
     <>
-      <h1 className="title-large text-dark">Title Test</h1>
+      <div className="mt-4 w-full justify-center">
+        <ProgressBar pageName="leaderboard" />
+      </div>
       <Button onClick={() => setClicked(true)}>
         {isLoading ? "Loading" : "Ping"}
       </Button>

client/src/pages/schedule.tsx

@@ -16,7 +16,6 @@ export default function Home() {
       <div className="mt-4 w-full justify-center">
         <ProgressBar pageName="schedule" />
       </div>
-      <h1 className="title-large text-dark">Title Test</h1>
       <Button onClick={() => setClicked(true)}>
         {isLoading ? "Loading" : "Ping"}
       </Button>