Added a 404 page to handle routing to questions not in the database..

Author: nikhil-ravi

public/SedgwickAveDisplay-Regular.ttf

@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@import url("https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap");
 html,
 body {
   padding: 0;
@@ -23,6 +23,10 @@ a {
   font-family: "burtons";
   src: url("../../public/Burtons.otf");
 }
+@font-face {
+  font-family: "Sedgwick Ave Display";
+  src: url("../../public/SedgwickAveDisplay-Regular.ttf");
+}
 
 p {
   margin-bottom: 1rem;

src/app/globals.css

@@ -0,0 +1,38 @@
+"use client";
+import { Chip } from "@material-tailwind/react";
+import Image from "next/image";
+import Link from "next/link";
+import { AiFillHome } from "react-icons/ai";
+
+export default function FourOhFour() {
+  return (
+    <div className="flex-col w-full mx-auto box-border min-h-[100vh] items-center text-center justify-center">
+      <div>
+        <div className="px-4 mx-auto">
+          <div className="mt-[10em] -mx-4 relative min-h-[1px] px-4">
+            <div class="flex min-h-[1px] px-4 justify-center items-center mx-auto mb-4">
+              <strong className="font-sedgwick text-9xl">404</strong>
+            </div>
+
+            <div class="min-h-[1px] px-4 msg">
+              <h2>
+                <strong>Page Not Found</strong>
+              </h2>
+              <p>Sorry, but that question has not yet been developed...</p>
+              <br />
+              <Link href="/" className="text-center">
+                <Chip
+                  value="Back to Questions"
+                  className="text-primary-800 dark:text-primary-100 bg-inherit border-[#ccc]"
+                  icon={
+                    <AiFillHome className="text-primary-800 dark:text-primary-100 text-lg" />
+                  }
+                />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/questions/[qid]/not-found.js

@@ -2,9 +2,11 @@ import { getQuestion, getSimilarQuestions } from "@/utils/controllers";
 import QuestionNavigator from "./QuestionNavigator";
 import { QuestionBody } from "./QuestionBody";
 import { SolutionWrapper } from "./SolutionWrapper";
+import { notFound } from "next/navigation";
 
 export default async function QuestionsPage({ params: { qid } }) {
   const { data } = await getQuestion(qid);
+  if (data.length === 0) notFound();
   const { data: similarQuestions } = await getSimilarQuestions(qid);
   return (
     <div className="flex-col w-full mx-auto">

src/app/questions/[qid]/page.jsx

@@ -14,6 +14,7 @@ module.exports = withMT({
     extend: {
       fontFamily: {
         burtons: "burtons",
+        sedgwick: "Sedgwick Ave Display",
       },
       colors: {
         primary: {