Custom error page

This commit is contained in:
David
2021-03-16 23:58:12 +01:00
parent 75757ae5a7
commit 0646b17c9b
7 changed files with 81 additions and 7 deletions

8
pages/404.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { FC } from "react";
import { CustomError } from "../components";
const My404: FC = () => (
<CustomError statusCode={404} />
);
export default My404;

8
pages/500.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { FC } from "react";
import { CustomError } from "../components";
const My500: FC = () => (
<CustomError statusCode={500} />
);
export default My500;

View File

@@ -2,10 +2,9 @@ import { useState, useEffect, useReducer, FC, ChangeEvent } from "react";
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
import Head from "next/head";
import Router from "next/router";
import Error from "next/error";
import { Stack, VStack, HStack, IconButton } from "@chakra-ui/react";
import { FaExchangeAlt } from "react-icons/fa";
import { Header, Footer, LangSelect, TranslationArea } from "../components";
import { CustomError, Header, Footer, LangSelect, TranslationArea } from "../components";
import { useToastOnLoad } from "../hooks";
import { googleScrape, extractSlug } from "../utils/translate";
import { retrieveFiltered } from "../utils/language";
@@ -46,7 +45,6 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
const { sourceLangs, targetLangs } = retrieveFiltered(source, target);
console.log(translation)
useToastOnLoad({
title: "Unexpected error",
description: errorMsg,
@@ -55,18 +53,20 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
});
return statusCode ? (
<Error statusCode={statusCode} />
<CustomError statusCode={statusCode} />
) : (
<>
<Head>
<title>Lingva Translate</title>
<title>
Lingva Translate
</title>
<link rel="icon" href="/favicon.svg" />
</Head>
<VStack minH="100vh" spacing={8}>
<Header />
<VStack px={[8, null, 24, 40]} flexGrow={1} w="full">
<HStack w="full">
<HStack px={[1, null, 3, 4]} w="full">
<LangSelect
id="source"
value={source}