remade frontend

frontend/src/Components/ServerSearch/ServerSearch.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { Spinner, Table } from "react-bootstrap";
+import ServerSearchResult from "./ServerSearchResult/ServerSearchResult";
+import type { Server } from "../../Lib/Servers";
+import { search, type SearchResult } from "../../Lib/Search";
+
+interface ServerSearchProps {
+  searchTerm: string;
+  server: Server;
+}
+
+const ServerSearch = ({ searchTerm, server }: ServerSearchProps) => {
+  const [searchResults, setSearchResults] = useState<Array<SearchResult>>([]);
+
+  useEffect(() => {
+    search(searchTerm, server.id).then(results => {
+      setSearchResults(results);
+    })
+  }, [searchTerm]);
+
+  return (
+    <Table striped bordered >
+      <thead>
+        <tr>
+          <th>{server.name}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {searchResults.length > 0 ?
+          searchResults.map(result => {
+            return (
+              <tr>
+                <td>
+                  <ServerSearchResult key={result.id} searchResult={result} server={server} />
+                </td>
+              </tr>
+            )
+          })
+          :
+          <Spinner />
+        }
+      </tbody>
+    </Table >
+
+    // <div>
+    //   <div>
+    //     <h1>{server.name}</h1>
+    //   </div>
+    //   <div>
+    //     {searchResults.length > 0 ?
+    //       searchResults.map(result => {
+    //         return <ServerSearchResult key={result.id} searchResult={result} server={server} />
+    //       })
+    //       :
+    //       <Spinner />
+    //     }
+    //   </div>
+    // </div>
+  )
+}
+
+export default ServerSearch;