progress work well now, it can silde along with the pathName. Next step I would like do something about layout

Author: survivzhang

client/public/Drone Vector.svg client/public/Drone.svgclient/public/Drone Vector.svg renamed to client/public/Drone.svg

@@ -0,0 +1,68 @@
+import Image from "next/image";
+import { title } from "process";
+import * as React from "react";
+
+export default function ProgressBar({ pageName }: { pageName: string }) {
+  let progress = 0;
+  let titleName = "";
+  switch (pageName) {
+    case "schedule":
+      progress = 0;
+      titleName = "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;
+  }
+
+  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>
+        <div className="flex flex-1">
+          <div
+            className="flex-shrink-0"
+            style={{
+              width: `${progress}%`,
+              transition: "width 3s ease-in-out",
+            }}
+          />
+          <div>
+            <Image
+              src="/Drone.svg"
+              alt="Drone"
+              width="50"
+              height="20"
+              className="object-contain"
+            />
+          </div>
+
+          <div className="ml-auto">
+            <Image
+              src="/FinishFlag.svg"
+              alt="Finish Flag"
+              width="50"
+              height="20"
+              className="object-contain"
+            />
+          </div>
+        </div>
+
+        <div className="flex w-full">
+          <div className="h-[2px] w-full bg-black" />
+        </div>
+      </div>
+    </div>
+  );
+}

client/public/Finish Vector.svg client/public/FinishFlag.svgclient/public/Finish Vector.svg renamed to client/public/FinishFlag.svg

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 
 import { Button } from "../components/ui/button";
 import Navbar from "../components/ui/navbar";
+import ProgressBar from "../components/ui/progress";
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -27,6 +28,9 @@ export default function Home() {
           fontSans.variable,
         )}
       >
+        <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"}