From 048793503855d078d73650bb75cc6a492ed542c7 Mon Sep 17 00:00:00 2001
From: Joshua Potter <jrpotter2112@gmail.com>
Date: Mon, 4 Dec 2023 16:16:50 -0700
Subject: [PATCH] Add 404 and 500 status pages.

---
 assets/js/react/components/Footer.tsx |  2 +-
 assets/js/react/pages/Search.tsx      |  9 +++++----
 assets/js/react/router.tsx            | 11 +++++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/assets/js/react/components/Footer.tsx b/assets/js/react/components/Footer.tsx
index 1cd9ec4..50ff767 100644
--- a/assets/js/react/components/Footer.tsx
+++ b/assets/js/react/components/Footer.tsx
@@ -6,7 +6,7 @@ import { Logo } from "./Logo"
 const navigation = [
   {
     title: "Students",
-    links: [{ title: "Find a Coach", href: "/c/" }],
+    links: [{ title: "Find a Coach", href: "/" }],
   },
   {
     title: "Company",
diff --git a/assets/js/react/pages/Search.tsx b/assets/js/react/pages/Search.tsx
index a71c646..c24caa0 100644
--- a/assets/js/react/pages/Search.tsx
+++ b/assets/js/react/pages/Search.tsx
@@ -23,21 +23,22 @@ function SearchResults() {
   })
 
   if (isLoading) {
-    return <Loading loading />
+    return <Loading className="mt-40" loading />
   }
 
   if (isError) {
     return (
       <FallbackMessage
-        title="Unexpected Error"
-        body="We're looking into this. Please refresh or try again later."
+        className="mt-40"
+        title="Blunder!"
+        body="Our tech team is working to restore the checkmate."
       />
     )
   }
 
   return (
     <FadeInStagger
-      className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+      className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
       faster
     >
       {data?.map((coach, index) => (
diff --git a/assets/js/react/router.tsx b/assets/js/react/router.tsx
index 7ac7b9d..08e6ef0 100644
--- a/assets/js/react/router.tsx
+++ b/assets/js/react/router.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 import { createBrowserRouter } from "react-router-dom"
 
+import { FallbackMessage } from "./components/FallbackMessage"
 import { Search } from "./pages/Search"
 
 export const router = createBrowserRouter([
@@ -8,4 +9,14 @@ export const router = createBrowserRouter([
     path: "/",
     element: <Search />,
   },
+  {
+    path: "*",
+    element: (
+      <FallbackMessage
+        className="mt-40"
+        title="Illegal Move!"
+        body="This page has wandered off the board."
+      />
+    ),
+  },
 ])