grid split and searchbar

app/tournois/page.tsx

@@ -1,6 +1,7 @@
 import dynamic from "next/dynamic";
 import Layout from "@/components/Layout";
 import TournamentTable from "@/components/TournamentTable";
+import { Tournament } from "@/types";
 
 /**
  * Imports the tournament map component, ensuring CSR only.
@@ -25,13 +26,15 @@ async function getTournaments() {
 }
 
 export default async function Tournaments() {
-  const tournamentData = await getTournaments();
+  const tournamentData: Tournament[] = await getTournaments();
   console.log(tournamentData);
 
   return (
     <Layout>
+      <main className="grid lg:grid-cols-2">
         <TournamentMapNoSSR />
         <TournamentTable tournamentData={tournamentData} />
+      </main>
     </Layout>
   );
 }

components/TournamentMap.tsx

@@ -2,12 +2,13 @@
 
 import "leaflet/dist/leaflet.css";
 import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import { LatLngLiteral } from "leaflet";
 
 export default function TournamentMap() {
-  const center: number[] = [47.0844, 2.3964];
+  const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
 
   return (
-    <section id="tournament-map" className="">
+    <section id="tournament-map" className="w-full lg:col-start-1 lg:col-end-2">
       <MapContainer
         center={center}
         zoom={5}

components/TournamentTable.tsx

@@ -1,38 +1,61 @@
-interface TournamentType {
+import { Tournament, TournamentTableProps } from "@/types";
-  _id: string;
-  location: string;
-  department: string;
-  tournament: string;
-  url: string;
-  time_control: string;
-  date: string;
-  coordinates: [number, number];
-}
 
-export default function TournamentTable({ tournamentData }) {
+export default function TournamentTable({
-  const tournaments = tournamentData.map((t: TournamentType) => (
+  tournamentData,
+}: TournamentTableProps) {
+  const tournaments = tournamentData.map((t: Tournament) => (
     <tr
-      className="border-b transition duration-300 ease-in-out hover:bg-neutral-100"
+      className="border-b border-gray-700 border-opacity-20 bg-gray-800 text-white transition duration-300 ease-in-out hover:bg-gray-400 hover:text-black"
       key={t._id}
     >
-      <td>{t.date}</td>
+      <td className="p-3">{t.date}</td>
-      <td>{t.location}</td>
+      <td className="p-3">{t.location}</td>
       <a href={t.url} target="_blank">
-        <td>{t.tournament}</td>
+        <td className="p-3">{t.tournament}</td>
       </a>
-      <td>{t.time_control}</td>
+      <td className="p-3">{t.time_control}</td>
     </tr>
   ));
 
   return (
-    <section id="tournament-table" className="">
+    <section
-      <table className="min-w-full text-center">
+      id="tournament-table"
-        <thead className="border-b">
+      className="w-full lg:col-start-2 lg:col-end-3"
-          <tr>
+    >
-            <th>Date</th>
+      <div className="p-3">
-            <th>Ville</th>
+        <label htmlFor="table-search" className="sr-only">
-            <th>Tournois</th>
+          Search
-            <th>Cadence</th>
+        </label>
+        <div className="relative mt-1">
+          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+            <svg
+              className="w-5 h-5 text-gray-500 dark:text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </div>
+          <input
+            type="text"
+            id="table-search"
+            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="Search for items"
+          />
+        </div>
+      </div>
+      <table className="w-full text-center text-xs">
+        <thead className="bg-gray-600 text-white">
+          <tr className="">
+            <th className="p-3">Date</th>
+            <th className="p-3">Ville</th>
+            <th className="p-3">Tournois</th>
+            <th className="p-3">Cadence</th>
           </tr>
         </thead>
         <tbody>{tournaments}</tbody>

lib/mongodb.ts

@@ -4,28 +4,31 @@ if (!process.env.MONGODB_URI) {
   throw new Error('Invalid environment variable: "MONGODB_URI"');
 }
 
-const uri = process.env.MONGODB_URI
+const uri = process.env.MONGODB_URI;
-const options = {}
+const options = {};
 
-let client
+let client;
-let clientPromise: Promise<MongoClient>
+let clientPromise: Promise<MongoClient>;
 
 if (!process.env.MONGODB_URI) {
-    throw new Error('Please add your Mongo URI to .env.local')
+  throw new Error("Please add your Mongo URI to .env.local");
 }
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === "development") {
   // In development mode, use a global variable so that the value
   // is preserved across module reloads caused by HMR (Hot Module Replacement).
+  //@ts-ignore
   if (!global._mongoClientPromise) {
-        client = new MongoClient(uri, options)
+    client = new MongoClient(uri, options);
-        global._mongoClientPromise = client.connect()
+    //@ts-ignore
+    global._mongoClientPromise = client.connect();
   }
-    clientPromise = global._mongoClientPromise
+  //@ts-ignore
+  clientPromise = global._mongoClientPromise;
 } else {
   // In production mode, it's best to not use a global variable.
-    client = new MongoClient(uri, options)
+  client = new MongoClient(uri, options);
-    clientPromise = client.connect()
+  clientPromise = client.connect();
 }
 
-export default clientPromise
+export default clientPromise;

package-lock.json

@@ -8,6 +8,7 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@tanstack/react-table": "^8.9.1",
         "@types/node": "20.2.3",
         "@types/react": "18.2.6",
         "@types/react-dom": "18.2.4",
@@ -27,6 +28,7 @@
       "devDependencies": {
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
+        "@types/leaflet": "^1.9.3",
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0"
       }
@@ -1479,6 +1481,37 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.1.tgz",
+      "integrity": "sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==",
+      "dependencies": {
+        "@tanstack/table-core": "8.9.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.1.tgz",
+      "integrity": "sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz",
@@ -1607,6 +1640,12 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "dev": true
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
@@ -1698,6 +1737,15 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.2.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.3.tgz",

package.json

@@ -10,6 +10,7 @@
     "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",
@@ -29,6 +30,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@types/leaflet": "^1.9.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0"
   }

types.ts

@@ -0,0 +1,14 @@
+export interface Tournament {
+  _id: string;
+  location: string;
+  department: string;
+  tournament: string;
+  url: string;
+  time_control: string;
+  date: string;
+  coordinates: [number, number];
+}
+
+export interface TournamentTableProps {
+  tournamentData: Tournament[];
+}