feat: new error page using antd
This commit is contained in:
parent
0b51183cd7
commit
4860a66dca
@ -1,17 +1,14 @@
|
||||
import { useRouteError, isRouteErrorResponse } from "react-router-dom";
|
||||
import {
|
||||
useRouteError,
|
||||
isRouteErrorResponse,
|
||||
useNavigate,
|
||||
} from "react-router-dom";
|
||||
import { Button, Result, Space } from "antd";
|
||||
|
||||
const ErrorPage = () => {
|
||||
const style: React.CSSProperties = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
height: "80vh",
|
||||
lineHeight: "0.8",
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
const error = useRouteError();
|
||||
|
||||
const convertError = (error: unknown): string => {
|
||||
if (isRouteErrorResponse(error)) {
|
||||
return error.error?.message || error.statusText;
|
||||
@ -26,13 +23,21 @@ const ErrorPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<h1>Oops!</h1>
|
||||
<p>Sorry, an unexpected error has occurred.</p>
|
||||
<p>
|
||||
<i style={{ color: "#696969" }}>{convertError(error)}</i>
|
||||
</p>
|
||||
</div>
|
||||
<Result
|
||||
status="error"
|
||||
title="Sorry, an unexpected error has occurred."
|
||||
subTitle={convertError(error)}
|
||||
extra={
|
||||
<Space wrap>
|
||||
<Button type="primary" onClick={() => navigate(-1)}>
|
||||
Previous Page
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => navigate("/")}>
|
||||
Home
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
Reference in New Issue
Block a user