Open slotbooking

src/App.tsx

@@ -3,26 +3,44 @@ import {
   createRoutesFromElements,
   Route,
   RouterProvider,
+  useRouteError,
 } from "react-router-dom";
 
 import Root from "./pages";
 import NavLayout from "./components/NavLayout";
 import Login from "./pages/login";
-import Apply from "./pages/apply";
+// import Apply from "./pages/apply";
 import { useEffect, useState } from "react";
 import { supabase, SessionContext } from "./supabase";
-// import Book from "./pages/book"
+import Book from "./pages/book"
 import Level from "./pages/level";
 // import Result from "./pages/results"
 
+function ErrorBoundary() {
+  const error: any = useRouteError();
+  console.log(error);
+
+  return (
+    <div className="flex justify-center items-center h-full w-full">
+      <div className="max-w-80">
+        <h1 className="text-7xl text-yellow-400 uppercase font-mono font-semibold italic">{error.status}</h1>
+        <p className="text-3xl">
+          {error.statusText}
+        </p>
+        <p className="font-mono">{error.data}</p>
+      </div>
+    </div>
+  )
+}
+
 const router = createBrowserRouter(
   createRoutesFromElements(
     <>
-      <Route element={<NavLayout />}>
+      <Route element={<NavLayout />} errorElement={<ErrorBoundary />}>
         <Route path="/" element={<Root />} />
         <Route path="auth" element={<Login />} />
-        <Route path="apply" element={<Apply />} />
-        {/* <Route path="book" element={<Book />} /> */}
+        {/* <Route path="apply" element={<Apply />} /> */}
+        <Route path="book" element={<Book />} />
         <Route path="admin" element={<Level />} />
         {/* <Route path="result" element={<Result />} /> */}
       </Route>

src/pages/index.tsx

@@ -4,8 +4,8 @@ import Card from "../components/Card";
 
 import "./index.scss";
 
-export const rec_open = true;
-export const booking = !rec_open && false;
+export const rec_open = false;
+export const booking = !rec_open && true;
 export const results = !rec_open && !booking && false;
 
 export default function Root() {
@@ -187,18 +187,18 @@ export default function Root() {
                 </span>{" "}
                 only for Linux users?
               </h1>
-              <p>
+              <div>
                 Though Linux is in the name, LUG represents more than just
                 Linux. It embodies:
-                <ul className="list-disc">
+                <ul className="list-disc ml-4">
                   <li>The principles of free and open-source software</li>
                   <li>Comprehensive tech education</li>
                   <li>
                     The freedom to reinvent the wheel (sometimes with good
                     reason, sometimes not 😅)
                   </li>
                 </ul>
-              </p>
+              </div>
             </div>
           </div>
         </section>