Custom 404/Error page (#133)

* feat(frontend): custom 404 + error page with intl formatting

* style(frontend): add styling for error message

src/pages/404.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  pageNotFound: '404 - Page Not Found',
+  returnHome: 'Return Home',
+});
+
+const Custom404: React.FC = () => {
+  return (
+    <div className="error-message">
+      <div className="text-4xl">
+        <FormattedMessage {...messages.pageNotFound} />
+      </div>
+      <Link href="/">
+        <a className="flex">
+          <FormattedMessage {...messages.returnHome} />
+          <svg
+            className="w-6 h-6 ml-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </a>
+      </Link>
+    </div>
+  );
+};
+
+export default Custom404;

src/pages/_error.tsx

@@ -1,31 +1,62 @@
 import React from 'react';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import Link from 'next/link';
-import { Undefinable } from '../utils/typeHelpers';
+import type { Undefinable } from '../utils/typeHelpers';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 interface ErrorProps {
   statusCode?: number;
 }
 
-const getErrorMessage = (statusCode?: number) => {
-  switch (statusCode) {
-    case 404:
-      return 'Page not found.';
-    default:
-      return 'Something went wrong.';
-  }
-};
+const messages = defineMessages({
+  internalServerError: '{statusCode} - Internal Server Error',
+  serviceUnavailable: '{statusCode} - Service Unavailable',
+  somethingWentWrong: '{statusCode} - Something went wrong',
+  oops: 'Oops',
+  returnHome: 'Return Home',
+});
 
 const Error: NextPage<ErrorProps> = ({ statusCode }) => {
+  const intl = useIntl();
+
+  const getErrorMessage = (statusCode?: number) => {
+    switch (statusCode) {
+      case 500:
+        return intl.formatMessage(messages.internalServerError, {
+          statusCode: 500,
+        });
+      case 503:
+        return intl.formatMessage(messages.serviceUnavailable, {
+          statusCode: 503,
+        });
+      default:
+        return intl.formatMessage(messages.somethingWentWrong, {
+          statusCode: statusCode ?? intl.formatMessage(messages.oops),
+        });
+    }
+  };
   return (
-    <div className="flex items-center justify-center relative top-0 left-0 bottom-0 right-0 h-screen flex-col">
-      <div className="text-4xl">{statusCode ? statusCode : 'Oops'}</div>
-      <p>
-        {getErrorMessage(statusCode)}{' '}
-        <Link href="/">
-          <a>Go home</a>
-        </Link>
-      </p>
+    <div className="error-message">
+      <div className="text-4xl">{getErrorMessage(statusCode)}</div>
+      <Link href="/">
+        <a className="flex">
+          <FormattedMessage {...messages.returnHome} />
+          <svg
+            className="w-6 h-6 ml-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </a>
+      </Link>
     </div>
   );
 };