From bb170f9d943fe6b6483d6c99b64854c4f9c4b820 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Thu, 15 Aug 2024 15:01:35 -0500
Subject: [PATCH] default, root level, custom not-found and error pages added
 for Cuiloa to match current stylings.

---
 apps/web/src/app/error.tsx     | 36 ++++++++++++++++++++++++++++++++++
 apps/web/src/app/not-found.tsx | 18 +++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 apps/web/src/app/error.tsx
 create mode 100644 apps/web/src/app/not-found.tsx

diff --git a/apps/web/src/app/error.tsx b/apps/web/src/app/error.tsx
new file mode 100644
index 0000000..da0d89c
--- /dev/null
+++ b/apps/web/src/app/error.tsx
@@ -0,0 +1,36 @@
+// NOTE: Must be client component. Them's the rules.
+// https://nextjs.org/docs/app/building-your-application/routing/error-handling#using-error-boundaries
+"use client";
+
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+     console.error(error);
+  }, [error]);
+
+  return (
+    <div className="bg-primary/60 py-8 rounded-lg border">
+      <div className="flex flex-col gap-8 items-center">
+        <h1 className="text-lg font-medium sm:w-11/12 w-full">An error has occurred.</h1>
+        <p className="text-sm sm:w-11/12 w-full">Apologies, but something happened with Cuiloa and the client couldn&apos;t recover.</p>
+        <div className="flex sm:w-11/12 w-full gap-8">
+          <Button className="w-fit" asChild>
+            <Link href={"/"}>Home</Link>
+          </Button>
+          <Button className="w-fit" onClick={() => reset()}>
+            Try Reloading
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
new file mode 100644
index 0000000..2d7a040
--- /dev/null
+++ b/apps/web/src/app/not-found.tsx
@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="bg-primary/60 py-8 rounded-lg border">
+      <div className="flex flex-col gap-8 items-center">
+        <h1 className="text-lg font-medium sm:w-11/12 w-full">Page not found!</h1>
+        <p className="text-sm sm:w-11/12 w-full">Apologies, but Cuiloa could not find the page you requested.</p>
+        <div className="flex sm:w-11/12 w-full gap-8">
+          <Button className="w-fit" asChild>
+            <Link href={"/"}>Go Home</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}