feat: refined ErrorPage
This commit is contained in:
parent
e5bb8bea6e
commit
4876decb26
@ -1,5 +1,6 @@
|
||||
import { isRouteErrorResponse, useNavigate, useRouteError } from "react-router-dom";
|
||||
import { Alert, AlertDescription, AlertIcon, AlertTitle, Button, ButtonGroup } from "@chakra-ui/react";
|
||||
import { Box, Button, ButtonGroup, Flex, Heading, Text } from "@chakra-ui/react";
|
||||
import { CloseIcon } from "@chakra-ui/icons";
|
||||
|
||||
export const ErrorPage = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -19,21 +20,27 @@ export const ErrorPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Alert
|
||||
status="error"
|
||||
variant="subtle"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
textAlign="center"
|
||||
height="200px"
|
||||
>
|
||||
<AlertIcon boxSize="40px" mr={0} />
|
||||
<AlertTitle mt={4} mb={1} fontSize="lg">
|
||||
{" "}
|
||||
Sorry, an unexpected error has occurred.{" "}
|
||||
</AlertTitle>
|
||||
<AlertDescription maxWidth="sm">{convertError(error)}</AlertDescription>
|
||||
<Box textAlign="center" py={10} px={6}>
|
||||
<Box display="inline-block">
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
bg={"red.500"}
|
||||
rounded={"50px"}
|
||||
w={"55px"}
|
||||
h={"55px"}
|
||||
textAlign="center"
|
||||
>
|
||||
<CloseIcon boxSize={"20px"} color={"white"} />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Heading as="h2" size="lg" mt={6} mb={2}>
|
||||
Sorry, an unexpected error has occurred.
|
||||
</Heading>
|
||||
<Text color={"gray.500"} mb={3}>
|
||||
{convertError(error)}
|
||||
</Text>
|
||||
<ButtonGroup>
|
||||
<Button variant="solid" colorScheme="orange" onClick={() => navigate(-1)}>
|
||||
Previous Page
|
||||
@ -42,6 +49,6 @@ export const ErrorPage = () => {
|
||||
Home
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Alert>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user