feat: add 'not found' view

src/views/home/home.tsx

@@ -472,6 +472,16 @@ const Footer = () => {
   );
 };
 
+export const HomeLogo = () => {
+  return (
+    <Link to='/'>
+      <div className={styles.logo}>
+        <img alt='' src='/assets/logo/logo-transparent.png' />
+      </div>
+    </Link>
+  );
+};
+
 const Home = () => {
   const defaultSubplebbits = useDefaultSubplebbits();
   const subplebbitAddresses = useDefaultSubplebbitAddresses();
@@ -479,11 +489,7 @@ const Home = () => {
 
   return (
     <div className={styles.content}>
-      <Link to='/'>
-        <div className={styles.logo}>
-          <img alt='' src='/assets/logo/logo-transparent.png' />
-        </div>
-      </Link>
+      <HomeLogo />
       <SearchBar />
       <InfoBox />
       <Boards multisub={defaultSubplebbits} subplebbits={subplebbits} />

src/views/home/index.ts

@@ -1 +1 @@
-export { default } from './home';
+export { HomeLogo, default } from './home';

src/views/not-found/index.ts

@@ -0,0 +1 @@
+export { default } from './not-found';

src/views/not-found/not-found.module.css

@@ -0,0 +1,56 @@
+.content {
+  margin: auto;
+    text-align: left;
+    width: 57.69em;
+    min-width: 750px;
+}
+
+.boxOuter {
+  background: #fff;
+  border: 1px solid;
+  zoom: 100%;
+  margin-bottom: .5em;
+  padding-bottom: .5em;
+}
+
+.boxBar {
+  background: #fca;
+  color: #800;
+  position: relative;
+  zoom: 100%;
+  padding-left: .5em;
+  line-height: 2em;
+}
+
+.boxBar h2 {
+  text-align: center;
+  font-size: 131%;
+  font-weight: 700;
+}
+
+.boxContent {
+  margin-top: 10px;
+  color: #000;
+  line-height: 1.5em;
+  font-size: 93%;
+  padding: .5em;
+  padding-top: .25em;
+  padding-bottom: 0;
+}
+
+.boxContent img {
+  display: block;
+  margin: auto;
+}
+
+.backToBoard {
+  text-align: center;
+  font-size: 12pt !important;
+  margin: 0 20px 10px 20px;
+  color: #800;
+  font-weight: bold;
+}
+
+.backToBoard a {
+  color: blue;
+}

src/views/not-found/not-found.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { HomeLogo } from '../home';
+import styles from './not-found.module.css';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+
+const totalNotFoundImages = 2;
+
+const NotFoundImage = () => {
+  const [imagePath] = useState(() => {
+    const randomBannerIndex = Math.floor(Math.random() * totalNotFoundImages) + 1;
+    return `assets/not-found/not-found-${randomBannerIndex}.jpg`;
+  });
+
+  return <img src={imagePath} alt='' />;
+};
+
+const NotFound = () => {
+  const { subplebbitAddress } = useParams();
+
+  return (
+    <div className={styles.content}>
+      <HomeLogo />
+      <div className={styles.boxOuter}>
+        <div className={styles.boxInner}>
+          <div className={styles.boxBar}>
+            <h2>404 Not Found</h2>
+          </div>
+          <div className={styles.boxContent}>
+            <NotFoundImage />
+            {subplebbitAddress && (
+              <>
+                <br />
+                <div className={styles.backToBoard}>
+                  [<Link to={`/p/${subplebbitAddress}`}>Back to p/{Plebbit.getShortAddress(subplebbitAddress)}</Link>]
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;