add 404 page

.changeset/slimy-beers-chew.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add 404 page

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,

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>
+  );
+}