add docs searching

src/app/components/container.tsx

@@ -12,7 +12,7 @@ export default function Container({ children }: ContainerProps): ReactElement {
   return (
     <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
       <NavBar />
-      <div className="w-full flex mt-4 justify-center">{children}</div>
+      <div className="w-full flex mt-4 justify-center h-full">{children}</div>
     </div>
   );
 }

src/app/components/docs/documentation-pages.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { DocsContentMetadata } from "@/app/common/documentation";
+import React, { ReactElement } from "react";
+import { DialogClose } from "../ui/dialog";
+import { useRouter } from "next/navigation";
+
+type PagesProps = {
+  /**
+   * The documentation pages to display.
+   */
+  pages: DocsContentMetadata[] | undefined;
+};
+
+export function DocumentationPages({ pages }: PagesProps): ReactElement {
+  const router = useRouter();
+
+  return (
+    <>
+      {pages && pages.length === 0 && <p>No results found</p>}
+
+      {pages &&
+        pages.length > 1 &&
+        pages.map(page => {
+          return (
+            <DialogClose
+              key={page.slug}
+              className="text-left bg-card p-2 rounded-lg"
+              onClick={() => {
+                router.replace(`/docs/${page.slug}`);
+              }}
+            >
+              <h2 className="font-semibold">{page.title}</h2>
+              <p className="text-accent">{page.summary}</p>
+            </DialogClose>
+          );
+        })}
+    </>
+  );
+}

src/app/components/docs/search.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { ReactElement, useState } from "react";
+import { Button } from "@/app/components/ui/button";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/app/components/ui/dialog";
+import { DocsContentMetadata } from "@/app/common/documentation";
+import { DocumentationPages } from "@/app/components/docs/documentation-pages";
+
+export function Search(): ReactElement {
+  /**
+   * The pages that were found
+   */
+  const [pages, setPages] = useState<DocsContentMetadata[] | undefined>(undefined);
+
+  /**
+   * Search the documentation
+   * for the given query.
+   *
+   * @param query the query to search for
+   */
+  async function searchDocs(query: string): Promise<void> {
+    // Don't bother searching if the query is less than 3 characters
+    if (query.length < 3) {
+      return setPages(undefined);
+    }
+
+    // Attempt to search for the query
+    const response = await fetch(`/api/docs/search?query=${query}`);
+    const pages: DocsContentMetadata[] = await response.json();
+    setPages(pages);
+  }
+
+  return (
+    <div className="w-full md:w-[250px] min-h-fit h-fit bg-card rounded-lg p-3">
+      <div className="flex flex-col w-full">
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button>Search</Button>
+          </DialogTrigger>
+          <DialogContent className="w-[600px]">
+            <DialogTitle>Search Documentation</DialogTitle>
+            <input
+              type="text"
+              placeholder="Search documentation"
+              className="w-full p-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:border-ring"
+              onChange={e => searchDocs(e.target.value)}
+            />
+
+            <DocumentationPages pages={pages} />
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}