CloudHost/LingvAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Custom error page

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

56
components/CustomError.tsx Normal file
View File

@@ -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<Props> = ({ statusCode }) => (
<>
<Head>
<title>
{statusCode} - {statusTexts?.[statusCode] ?? statusTexts.fallback}
</title>
<link rel="icon" href="/favicon.svg" />
</Head>
<VStack h="100vh">
<Header/>
<Stack
flexGrow={1}
color={useColorModeValue("lingva.900", "lingva.100")}
direction={["column", null, "row"]}
justify="center"
align="center"
spacing={4}
>
<HStack align="center" spacing={5}>
<Heading as="h1" size="3xl">
{statusCode}
</Heading>
<Icon as={FaSadTear} boxSize={10} />
</HStack>
<Text as="h2" fontSize="xl">
{statusTexts?.[statusCode] ?? statusTexts.fallback}
</Text>
</Stack>
<Footer/>
</VStack>
</>
);
export default CustomError;

1
components/Footer.tsx
View File

@@ -11,6 +11,7 @@ const Footer: FC<Props> = (props) => (
p={3} p={3}
fontSize={["sm", null, "md"]} fontSize={["sm", null, "md"]}
bgColor={useColorModeValue("lingva.100", "lingva.900")} bgColor={useColorModeValue("lingva.100", "lingva.900")}
color={useColorModeValue("lingva.800", "lingva.200")}
{...props} {...props}
> >
<Text as="span">&#169; 2021 TheDavidDelta</Text> <Text as="span">&#169; 2021 TheDavidDelta</Text>

2
components/Header.tsx
View File

@@ -1,5 +1,5 @@
import { FC } from "react"; import { FC } from "react";
import { Flex, HStack, useColorModeValue, IconButton, Link } from "@chakra-ui/react"; import { Flex, HStack, IconButton, Link, useColorModeValue } from "@chakra-ui/react";
import { FaGithub } from "react-icons/fa"; import { FaGithub } from "react-icons/fa";
import Image from "next/image"; import Image from "next/image";
import ColorModeToggler from "./ColorModeToggler"; import ColorModeToggler from "./ColorModeToggler";

1
components/index.tsx
View File

@@ -1,3 +1,4 @@
export { default as CustomError } from "./CustomError";
export { default as Header } from "./Header"; export { default as Header } from "./Header";
export { default as Footer } from "./Footer"; export { default as Footer } from "./Footer";
export { default as LangSelect } from "./LangSelect"; export { default as LangSelect } from "./LangSelect";

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;

12
pages/[[...slug]].tsx
View File

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