Initial commit

src/pages/errors/Error.tsx

@@ -0,0 +1,36 @@
+import { ReloadOutlined } from "@ant-design/icons";
+import { Result, Typography } from "antd";
+import BackIcon from "components/Icons/BackIcon";
+import { useRouteError } from "react-router-dom";
+
+const { Paragraph, Text } = Typography;
+
+type Error = unknown | any;
+
+export const ErrorPage = () => {
+  const error: Error = useRouteError();
+  console.error(error);
+
+  return (
+    <Result
+      status="error"
+      title="Oops!"
+      subTitle="Sorry, an unexpected error has occurred."
+      extra={[<BackIcon />, <ReloadOutlined />]}
+    >
+      <div className="desc">
+        <Paragraph>
+          <Text
+            strong
+            style={{
+              fontSize: 16,
+            }}
+          >
+            The page you tried to open has the following error:
+          </Text>
+        </Paragraph>
+        <Paragraph copyable>{error.statusText || error.message}</Paragraph>
+      </div>
+    </Result>
+  );
+};

src/pages/errors/Error400.tsx

@@ -0,0 +1,39 @@
+import { red } from '@ant-design/colors';
+import { CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Result, Typography } from 'antd';
+import BackIcon from 'components/Icons/BackIcon';
+
+const { Paragraph, Text } = Typography;
+
+export const Error400Page = () => {
+  return (
+    <Result
+      status="error"
+      title="400"
+      subTitle="Bad request. The request could not be understood by the server due to malformed syntax. The client should not repeat the request without modifications"
+        extra={[<BackIcon />, <ReloadOutlined />]}
+    >
+      <div className="desc">
+        <Paragraph>
+          <Text
+            strong
+            style={{
+              fontSize: 16,
+            }}
+          >
+            The content you submitted has the following error:
+          </Text>
+        </Paragraph>
+        <Paragraph>
+          <CloseCircleOutlined style={{ color: red[5] }} />
+          &nbsp;Bad Request - Invalid URL &nbsp;<a>Forward error &gt;</a>
+        </Paragraph>
+        <Paragraph>
+          <CloseCircleOutlined style={{ color: red[5] }} />
+          &nbsp;Bad Request. Your browser sent a request that this server could
+          not understand &nbsp;<a>Go to console &gt;</a>
+        </Paragraph>
+      </div>
+    </Result>
+  );
+};

src/pages/errors/Error403.tsx

@@ -0,0 +1,13 @@
+import { Result } from 'antd';
+import BackIcon from 'components/Icons/BackIcon';
+
+export const Error403Page = () => {
+  return (
+    <Result
+      status="403"
+      title="403"
+      subTitle="Sorry, you are not authorized to access this page."
+      extra={<BackIcon />}
+    />
+  );
+};

src/pages/errors/Error404.tsx

@@ -0,0 +1,14 @@
+import { Result } from 'antd';
+import BackIcon from 'components/Icons/BackIcon';
+
+export const Error404Page = () => {
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="Sorry, the page you visited does not exist."
+      extra={<BackIcon />}
+
+    />
+  );
+};

src/pages/errors/Error500.tsx

@@ -0,0 +1,14 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Result } from 'antd';
+import BackIcon from 'components/Icons/BackIcon';
+
+export const Error500Page = () => {
+  return (
+    <Result
+      status="500"
+      title="500"
+      subTitle="Sorry, something went wrong."
+      extra={[<BackIcon />, <ReloadOutlined />]}
+    />
+  );
+};

src/pages/errors/Error503.tsx

@@ -0,0 +1,14 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Result } from 'antd';
+import BackIcon from 'components/Icons/BackIcon';
+
+export const Error503Page = () => {
+  return (
+    <Result
+      status="500"
+      title="500"
+      subTitle="Sorry, something went wrong."
+      extra={[<BackIcon />, <ReloadOutlined />]}
+    />
+  );
+};

src/pages/errors/index.ts

@@ -0,0 +1,6 @@
+export { ErrorPage } from './Error.tsx';
+export { Error400Page } from './Error400.tsx';
+export { Error403Page } from './Error403.tsx';
+export { Error404Page } from './Error404.tsx';
+export { Error500Page } from './Error500.tsx';
+export { Error503Page } from './Error503.tsx';