From d80020100551dabe41de6457d9731ed61ef91afe Mon Sep 17 00:00:00 2001
From: Ansen Bey <ansenbeyc73@gmail.com>
Date: Wed, 4 Dec 2024 22:19:38 +0530
Subject: [PATCH] feat: Improve 404 page navigation (#252)

---
 .changeset/weak-numbers-stare.md      |  5 ++++
 src/components/common/Empty/Empty.tsx |  8 ++++--
 src/main.tsx                          | 37 +++++++++++++++++++++------
 3 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/weak-numbers-stare.md

diff --git a/.changeset/weak-numbers-stare.md b/.changeset/weak-numbers-stare.md
new file mode 100644
index 0000000..43f4948
--- /dev/null
+++ b/.changeset/weak-numbers-stare.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Add navigation links and logo to the 404 page
diff --git a/src/components/common/Empty/Empty.tsx b/src/components/common/Empty/Empty.tsx
index f289e35..625ca7e 100644
--- a/src/components/common/Empty/Empty.tsx
+++ b/src/components/common/Empty/Empty.tsx
@@ -19,6 +19,7 @@ export function Empty({
   title,
   subtitle,
   className,
+  children,
   button,
   link,
 }: EmptyProps) {
@@ -32,8 +33,11 @@ export function Empty({
       <Icon size={40} className="text-gray-8 dark:text-graydark-8" />
       <h2 className="font-semibold text-xl">{title}</h2>
       {subtitle && <p className="text-gray-dim -mt-3">{subtitle}</p>}
-      {button && <Button {...button} />}
-      {link && <Link {...link} />}
+      <div className="flex gap-2">
+        {button && <Button {...button} />}
+        {link && <Link {...link} />}
+      </div>
+      {children}
     </div>
   );
 }
diff --git a/src/main.tsx b/src/main.tsx
index 7a1b62b..7b93e62 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,5 @@
 import "./styles/index.css";
+import { Logo } from "@/components/app";
 import { Empty } from "@/components/common";
 import { ConvexAuthProvider } from "@convex-dev/auth/react";
 import { api } from "@convex/_generated/api";
@@ -9,7 +10,7 @@ import {
   useConvexAuth,
   useQuery,
 } from "convex/react";
-import { TriangleAlert } from "lucide-react";
+import { ArrowLeft, TriangleAlert } from "lucide-react";
 import { ThemeProvider } from "next-themes";
 import { StrictMode, useEffect } from "react";
 import { createRoot } from "react-dom/client";
@@ -18,6 +19,32 @@ import { routeTree } from "./routeTree.gen";
 
 const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
 
+const NotFoundComponent = () => (
+  <div className="flex flex-col items-center justify-center gap-12 w-full min-h-screen px-4">
+    <Logo />
+    <Empty
+      title="Page not found"
+      subtitle="We couldn't find that page."
+      icon={TriangleAlert}
+      className="min-h-0 flex-none"
+      button={{
+        children: "Go back",
+        icon: ArrowLeft,
+        onPress: () => {
+          router.history.go(-1);
+        },
+      }}
+      link={{
+        children: "Go home",
+        href: { to: "/" },
+        button: {
+          variant: "secondary",
+        },
+      }}
+    />
+  </div>
+);
+
 const router = createRouter({
   routeTree,
   context: {
@@ -26,13 +53,7 @@ const router = createRouter({
     role: undefined!,
   },
   defaultPreload: "intent",
-  defaultNotFoundComponent: () => (
-    <Empty
-      title="Page not found"
-      subtitle="We couldn't find that page."
-      icon={TriangleAlert}
-    />
-  ),
+  defaultNotFoundComponent: NotFoundComponent,
 });
 
 declare module "@tanstack/react-router" {