map height fixed

.gitignore

@@ -1,5 +1,4 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-TODO
 
 # dependencies
 /node_modules

app/about/page.tsx

@@ -0,0 +1,14 @@
+import Layout from "@/components/Layout";
+
+export default function Home() {
+  return (
+    <Layout>
+      <header className="grid h-[calc(100%-144px)] md:h-[calc(100%-112px)] place-items-center">
+        <div className="relative h-full w-full bg-amber-200"></div>
+        <div className="absolute">
+          <h1>About Page</h1>
+        </div>
+      </header>
+    </Layout>
+  );
+}

app/contact/page.tsx

@@ -0,0 +1,14 @@
+import Layout from "@/components/Layout";
+
+export default function Home() {
+  return (
+    <Layout>
+      <header className="grid h-[calc(100%-144px)] md:h-[calc(100%-112px)] place-items-center">
+        <div className="relative h-full w-full bg-amber-200"></div>
+        <div className="absolute">
+          <h1>Contact Page</h1>
+        </div>
+      </header>
+    </Layout>
+  );
+}

app/page.tsx

@@ -3,11 +3,12 @@ import Layout from "@/components/Layout";
 export default function Home() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-64px)] place-items-center">
+      <header className="grid h-[calc(100%-144px)] md:h-[calc(100%-112px)] place-items-center">
         <div className="relative h-full w-full bg-[url('/images/map-bg.jpg')] brightness-[0.2]"></div>
-        <div className="absolute z-10">
+        <div className="absolute">
           <h1>Heading 1</h1>
           <h2>Heading 2</h2>
+          <h3>Heading 3</h3>
         </div>
       </header>
     </Layout>

app/tournois/page.tsx

@@ -24,11 +24,11 @@ export default async function Tournaments() {
 
   return (
     <Layout>
-      <main className="relative grid lg:grid-cols-2">
-        <div className="relative h-screen">
+      <main className="grid lg:grid-cols-2">
+        <div className="">
           <TournamentMap tournamentData={tournamentData} />
         </div>
-        <div className="bg-gray-800">
+        <div className="bg-gray-800 lg:overflow-y-auto">
           <TournamentTable tournamentData={tournamentData} />
         </div>
       </main>

components/Navbar.tsx

@@ -25,7 +25,7 @@ export default function Navbar() {
             <li className="mr-3">
               <Link
                 className="inline-block hover:text-gray-200 hover:text-underline py-2 px-4"
-                href="#"
+                href="/about"
               >
                 About
               </Link>
@@ -33,7 +33,7 @@ export default function Navbar() {
             <li className="mr-3">
               <Link
                 className="inline-block hover:text-gray-200 hover:text-underline py-2 px-4"
-                href="#"
+                href="/contact"
               >
                 Contact
               </Link>

components/TournamentMap.tsx

@@ -22,17 +22,16 @@ export default function TournamentMap({ tournamentData }: TournamentDataProps) {
   const otherMarkers = createLayerGroups("1h KO", "red", { tournamentData });
 
   return (
-    <section id="tournament-map" className="w-full lg:col-start-1 lg:col-end-2">
+    <section
+      id="tournament-map"
+      className="grid h-[calc(100vh-96px)] md:h-[calc(100vh-64px)]"
+    >
       <MapContainer
         center={center}
         zoom={5}
         scrollWheelZoom={false}
         style={{
           height: "100%",
-          width: "100%",
-          position: "absolute",
-          top: 0,
-          bottom: 0,
         }}
       >
         <TileLayer

hooks/useTournamentFilter.tsx

@@ -13,8 +13,6 @@ const useTournamentDataFilter = (
     );
   };
 
-  console.log(filtered);
-
   if (filtered.length === 0) {
     state = (
       <tr className="border-b border-gray-700 border-opacity-20 bg-gray-800 text-white">
@@ -52,7 +50,6 @@ const useTournamentDataFilter = (
       </tr>
     ));
   }
-
   return [state, setState];
 };
 

package.json

@@ -10,7 +10,6 @@
     "test": "jest --watch"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.9.1",
     "@types/node": "20.2.3",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
@@ -32,6 +31,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/leaflet": "^1.9.3",
+    "cypress": "^12.13.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0"
   }

tests/getTournaments.http

@@ -1,2 +0,0 @@
-### GET request with a header
-GET http://localhost:3000/api/tournaments