HMT-116/nav bar for judge page (#190)

Author: anthonyych4n

src/app/judging/assigned-teams/page.tsx

@@ -0,0 +1,23 @@
+import { NavBar } from "@/components/judging/Navbar";
+
+const AssignedTeamsPage = () => {
+  const assignedTeams = [
+    { id: 1, name: "Team Alpha" },
+    { id: 2, name: "Team Beta" },
+    { id: 3, name: "Team Gamma" },
+  ];
+
+  return (
+    <div>
+      <NavBar />
+      <h1> Put assinged teams here Assigned Teams</h1>
+      <ul>
+        {assignedTeams.map((team) => (
+          <li key={team.id}>{team.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default AssignedTeamsPage;

src/app/judging/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 
+import { NavBar } from "@/components/judging/Navbar";
+
 import JudgingDashboard from "./JudgingDashboard";
 
 export const dynamic = "force-dynamic";
@@ -20,6 +22,7 @@ export const metadata: Metadata = {
 export default function Judging() {
   return (
     <main className="flex w-full flex-1 flex-col gap-4 bg-dashboard-grey">
+      <NavBar />
       <JudgingDashboard />
     </main>
   );

src/app/judging/rubric/page.tsx

@@ -0,0 +1,13 @@
+import { NavBar } from "@/components/judging/Navbar";
+
+const RubricPage = () => {
+  return (
+    <div>
+      <NavBar />
+      <h1>Judging Rubric here</h1>
+      <ul></ul>
+    </div>
+  );
+};
+
+export default RubricPage;

src/app/judging/schedule/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface Schedule {
+  teamName: string;
+  timeSlot: string;
+}
+
+const SchedulePage = () => {
+  const [schedule, setSchedule] = useState<Schedule[]>([]);
+
+  useEffect(() => {
+    // Fetch schedule data from an API or define it statically
+    // Template for when we will fetch the schedule
+    const fetchSchedule = async () => {
+      const response = await fetch("/api/schedule");
+      const data = await response.json();
+      setSchedule(data);
+    };
+
+    fetchSchedule();
+  }, []);
+
+  return (
+    <div>
+      <h1>Judging Schedule</h1>
+      <table>
+        <thead>
+          <tr>
+            <th>Team Name</th>
+            <th>Time Slot</th>
+          </tr>
+        </thead>
+        <tbody>
+          {schedule.map((item, index) => (
+            <tr key={index}>
+              <td>{item.teamName}</td>
+              <td>{item.timeSlot}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default SchedulePage;

src/components/Header.tsx

@@ -68,7 +68,7 @@ export default function Header() {
             ) : user.type === UserType.Admin ? (
               <Link href="/admin">Admin Dashboard</Link>
             ) : user.type === UserType.Judge ? (
-              <Link href="/judging">Judge Dashboard</Link>
+              <Link href="/judging"></Link>
             ) : null}
           </>
         ) : (

src/components/judging/Navbar.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+
+export function NavBar() {
+  // Will add the actual routes when the pages are
+  const navigation = [
+    {
+      name: "Dashboard",
+      href: "/judging",
+    },
+    {
+      name: "Schedule",
+      href: "/judging/schedule",
+    },
+    {
+      name: "Assigned Teams",
+      href: "/judging/assigned-teams",
+    },
+    {
+      name: "Rubric",
+      href: "/judging/rubric",
+    },
+  ];
+
+  return (
+    <nav className="border-b bg-white text-awesomer-purple">
+      <div className="mx-auto flex h-20 items-center justify-center space-x-48 pl-8">
+        {navigation.map((item) => {
+          return (
+            <Link key={item.name} href={item.href} className="text-2xl">
+              {item.name}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}