dynamic tournament search

app/page.tsx

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

components/Footer.tsx

@@ -0,0 +1,7 @@
+export default function Footer() {
+  return (
+    <footer className="w-full bg-gray-800 text-white p-3">
+      <p>Footer</p>
+    </footer>
+  );
+}

components/Layout.tsx

@@ -1,4 +1,5 @@
 import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 export default function Layout({
   children, // will be a page or nested layout
@@ -6,9 +7,10 @@ export default function Layout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="bg-white font-sans leading-normal tracking-normal">
+    <div className="h-screen bg-white font-sans leading-normal tracking-normal">
       <Navbar />
       {children}
+      <Footer />
     </div>
   );
 }

components/TournamentTable.tsx

@@ -1,9 +1,24 @@
+"use client";
+
 import { Tournament, TournamentTableProps } from "@/types";
+import { useEffect, useState } from "react";
 
 export default function TournamentTable({
   tournamentData,
 }: TournamentTableProps) {
-  const tournaments = tournamentData.map((t: Tournament) => (
+  const [tournamentFilter, setTournamentFilter] = useState(""); // text from search bar
+  const [filteredTournamentData, setFilteredTournamentData] =
+    useState(tournamentData);
+
+  useEffect(() => {
+    setFilteredTournamentData(
+      tournamentData.filter((t) =>
+        t.location.includes(tournamentFilter.toUpperCase())
+      )
+    );
+  }, [tournamentFilter]);
+
+  const tournaments = filteredTournamentData.map((t: Tournament) => (
     <tr
       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}
@@ -22,7 +37,7 @@ export default function TournamentTable({
       id="tournament-table"
       className="w-full lg:col-start-2 lg:col-end-3"
     >
-      <div className="p-3">
+      <div className="p-3 bg-gray-800">
         <label htmlFor="table-search" className="sr-only">
           Search
         </label>
@@ -35,9 +50,9 @@ export default function TournamentTable({
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="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"
+                clipRule="evenodd"
               ></path>
             </svg>
           </div>
@@ -46,6 +61,8 @@ export default function TournamentTable({
             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"
+            value={tournamentFilter}
+            onChange={(e) => setTournamentFilter(e.target.value)}
           />
         </div>
       </div>