From 508b37d1fcb9cb7c627674afad0dcceae82e33fd Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Thu, 13 Feb 2025 21:29:01 -0600
Subject: [PATCH] add 404 page

---
 .changeset/slimy-beers-chew.md |  5 ++++
 src/app.tsx                    |  2 ++
 src/views/404/index.tsx        | 45 ++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 .changeset/slimy-beers-chew.md
 create mode 100644 src/views/404/index.tsx

diff --git a/.changeset/slimy-beers-chew.md b/.changeset/slimy-beers-chew.md
new file mode 100644
index 000000000..475932a52
--- /dev/null
+++ b/.changeset/slimy-beers-chew.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add 404 page
diff --git a/src/app.tsx b/src/app.tsx
index faa47441d..040f7c544 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -12,6 +12,7 @@ import useSetColorMode from "./hooks/use-set-color-mode";
 import TaskManagerProvider from "./views/task-manager/provider";
 
 // one off views
+import NoteFoundView from "./views/404";
 import NostrLinkView from "./views/link";
 import HomeView from "./views/home";
 import ThreadView from "./views/thread";
@@ -75,6 +76,7 @@ const NoLayoutPage = () => {
 
 const router = createBrowserRouter(
   [
+    { path: "*", Component: NoteFoundView },
     {
       path: "signin",
       Component: NoLayoutPage,
diff --git a/src/views/404/index.tsx b/src/views/404/index.tsx
new file mode 100644
index 000000000..4f96b3b1a
--- /dev/null
+++ b/src/views/404/index.tsx
@@ -0,0 +1,45 @@
+import { Button, Flex, Heading, Image, Text } from "@chakra-ui/react";
+import VerticalPageLayout from "../../components/vertical-page-layout";
+import styled from "@emotion/styled";
+import RouterLink from "../../components/router-link";
+
+const ImageContainer = styled.div`
+  border-width: 1rem;
+  border-color: red;
+  border-style: solid;
+  box-sizing: content-box;
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+
+  :after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: calc(50% - 0.75rem);
+    left: -10%;
+    transform: rotateZ(-45deg);
+    width: 120%;
+    height: 1.5rem;
+    background: red;
+  }
+`;
+
+export default function NoteFoundView() {
+  return (
+    <Flex direction="column" p="2" gap="10" w="full" alignItems="center" h="full" pt="15vh">
+      <ImageContainer>
+        <Image src="/logo.svg" w="48" />
+      </ImageContainer>
+      <Heading fontSize="9xl" fontFamily="monospace">
+        404
+      </Heading>
+      <Text fontSize="3xl" mb="10">
+        Looks like that page does not exist
+      </Text>
+      <Button size="lg" colorScheme="primary" as={RouterLink} to="/">
+        Return home
+      </Button>
+    </Flex>
+  );
+}