markers and groups added

app/page.tsx

@@ -3,8 +3,9 @@ import Layout from "@/components/Layout";
 export default function Home() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-64px)] bg-green-400 place-items-center">
-        <div>
+      <header className="grid h-[calc(100%-64px)] 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">
           <h1>Heading 1</h1>
           <h2>Heading 2</h2>
         </div>

app/tournois/page.tsx

@@ -7,12 +7,14 @@ import { Tournament } from "@/types";
  * Imports the tournament map component, ensuring CSR only.
  * @remarks SSR is not supported by react-leaflet
  */
-const TournamentMapNoSSR = dynamic(
-  () => import("../../components/TournamentMap"),
-  {
-    ssr: false,
-  }
-);
+const TournamentMap = dynamic(() => import("@/components/TournamentMap"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-screen grid text-black place-items-center">
+      <p>Loading map...</p>
+    </div>
+  ),
+});
 
 /**
  * Retrieves tournament data from /api/tournaments
@@ -27,13 +29,16 @@ async function getTournaments() {
 
 export default async function Tournaments() {
   const tournamentData: Tournament[] = await getTournaments();
-  console.log(tournamentData);
 
   return (
     <Layout>
       <main className="grid lg:grid-cols-2">
-        <TournamentMapNoSSR />
-        <TournamentTable tournamentData={tournamentData} />
+        <div className="relative h-screen">
+          <TournamentMap tournamentData={tournamentData} />
+        </div>
+        <div className="bg-gray-800">
+          <TournamentTable tournamentData={tournamentData} />
+        </div>
       </main>
     </Layout>
   );