44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { FC } from "react";
|
|
import { Stack, HStack, Heading, Text, Icon, useColorModeValue } from "@chakra-ui/react";
|
|
import { FaSadTear } from "react-icons/fa";
|
|
import Layout from "./Layout";
|
|
|
|
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 }) => (
|
|
<Layout customTitle={`${statusCode} - ${statusTexts?.[statusCode] ?? statusTexts.fallback}`}>
|
|
<Stack
|
|
color={useColorModeValue("lingva.900", "lingva.100")}
|
|
direction={["column", null, "row"]}
|
|
justify="center"
|
|
align="center"
|
|
spacing={4}
|
|
w="full"
|
|
>
|
|
<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>
|
|
</Layout>
|
|
);
|
|
|
|
export default CustomError;
|