map and table added

components/Layout.tsx

@@ -6,9 +6,9 @@ export default function Layout({
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <div className="bg-white font-sans leading-normal tracking-normal">
       <Navbar />
       {children}
-    </>
+    </div>
   );
 }

components/Navbar.tsx

@@ -1,3 +1,46 @@
+import Link from "next/link";
+
 export default function Navbar() {
-  return <nav className="bg-gray-800 p-2 m-0 w-full">NAVBAR</nav>;
+  return (
+    <nav className="bg-gray-800 p-2 mt-0 w-full">
+      <div className="container mx-auto flex flex-wrap items-center">
+        <div className="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
+          <Link
+            className="text-white no-underline hover:text-white hover:no-underline"
+            href="/"
+          >
+            <span className="text-2xl pl-2">Echecs France</span>
+          </Link>
+        </div>
+        <div className="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
+          <ul className="list-reset text-white no-underline flex justify-between flex-1 md:flex-none items-center">
+            <li className="mr-3">
+              <Link
+                className="inline-block hover:text-gray-200 hover:text-underline py-2 px-4"
+                href="/tournois"
+              >
+                Tournois
+              </Link>
+            </li>
+            <li className="mr-3">
+              <Link
+                className="inline-block hover:text-gray-200 hover:text-underline py-2 px-4"
+                href="#"
+              >
+                About
+              </Link>
+            </li>
+            <li className="mr-3">
+              <Link
+                className="inline-block hover:text-gray-200 hover:text-underline py-2 px-4"
+                href="#"
+              >
+                Contact
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
 }

components/TournamentMap.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import "leaflet/dist/leaflet.css";
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+
+export default function TournamentMap() {
+  const center: number[] = [47.0844, 2.3964];
+
+  return (
+    <section id="tournament-map" className="">
+      <MapContainer
+        center={center}
+        zoom={5}
+        scrollWheelZoom={false}
+        style={{ height: "50vh" }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+      </MapContainer>
+    </section>
+  );
+}

components/TournamentTable.tsx

@@ -0,0 +1,42 @@
+interface TournamentType {
+  _id: string;
+  location: string;
+  department: string;
+  tournament: string;
+  url: string;
+  time_control: string;
+  date: string;
+  coordinates: [number, number];
+}
+
+export default function TournamentTable({ tournamentData }) {
+  const tournaments = tournamentData.map((t: TournamentType) => (
+    <tr
+      className="border-b transition duration-300 ease-in-out hover:bg-neutral-100"
+      key={t._id}
+    >
+      <td>{t.date}</td>
+      <td>{t.location}</td>
+      <a href={t.url} target="_blank">
+        <td>{t.tournament}</td>
+      </a>
+      <td>{t.time_control}</td>
+    </tr>
+  ));
+
+  return (
+    <section id="tournament-table" className="">
+      <table className="min-w-full text-center">
+        <thead className="border-b">
+          <tr>
+            <th>Date</th>
+            <th>Ville</th>
+            <th>Tournois</th>
+            <th>Cadence</th>
+          </tr>
+        </thead>
+        <tbody>{tournaments}</tbody>
+      </table>
+    </section>
+  );
+}