From 0646b17c9ba2289698c309a525cfd8bb2f865a14 Mon Sep 17 00:00:00 2001 From: David Date: Tue, 16 Mar 2021 23:58:12 +0100 Subject: [PATCH] Custom error page --- components/CustomError.tsx | 56 ++++++++++++++++++++++++++++++++++++++ components/Footer.tsx | 1 + components/Header.tsx | 2 +- components/index.tsx | 1 + pages/404.tsx | 8 ++++++ pages/500.tsx | 8 ++++++ pages/[[...slug]].tsx | 12 ++++---- 7 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 components/CustomError.tsx create mode 100644 pages/404.tsx create mode 100644 pages/500.tsx diff --git a/components/CustomError.tsx b/components/CustomError.tsx new file mode 100644 index 0000000..8849650 --- /dev/null +++ b/components/CustomError.tsx @@ -0,0 +1,56 @@ +import { FC } from "react"; +import Head from "next/head"; +import { Stack, VStack, HStack, Heading, Text, Icon, useColorModeValue } from "@chakra-ui/react"; +import { FaSadTear } from "react-icons/fa"; +import Header from "./Header"; +import Footer from "./Footer"; + +const statusTexts: { + [key: string]: string +} = { + 400: "Bad Request", + 404: "This page could not be found", + 405: "Method Not Allowed", + 500: "Internal Server Error", + fallback: "An unexpected error has occurred" +}; + +type Props = { + statusCode: number +}; + +const CustomError: FC = ({ statusCode }) => ( + <> + + + {statusCode} - {statusTexts?.[statusCode] ?? statusTexts.fallback} + + + + + +
+ + + + {statusCode} + + + + + {statusTexts?.[statusCode] ?? statusTexts.fallback} + + +