Add ErrorSection component

This lets us render errors gracefully

components/ErrorSection/index.scss

@@ -0,0 +1,22 @@
+section.Error {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: $unit;
+  margin: 0 auto;
+  max-width: 50vw;
+  justify-content: center;
+  height: 60vh;
+  text-align: center;
+
+  .Code {
+    color: var(--text-secondary);
+    font-size: $font-tiny;
+    font-weight: $bold;
+  }
+
+  .Button {
+    margin-top: $unit-2x;
+    width: fit-content;
+  }
+}

components/ErrorSection/index.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useTranslation } from 'next-i18next'
+
+import Button from '~components/Button'
+import { ResponseStatus } from '~types'
+
+import './index.scss'
+
+interface Props {
+  status: ResponseStatus
+}
+
+const ErrorSection = ({ status }: Props) => {
+  // Import translations
+  const { t } = useTranslation('common')
+
+  const [statusText, setStatusText] = useState('')
+
+  useEffect(() => {
+    setStatusText(status.text.replace(' ', '_').toLowerCase())
+  }, [status.text])
+
+  const errorBody = () => {
+    return (
+      <>
+        <div className="Code">{status.code}</div>
+        <h1>{t(`errors.${statusText}.title`)}</h1>
+        <p>{t(`errors.${statusText}.description`)}</p>
+      </>
+    )
+  }
+
+  return (
+    <section className="Error">
+      {errorBody()}
+      {[401, 404].includes(status.code) ? (
+        <Link href="/new">
+          <Button text={t('errors.not_found.button')} />
+        </Link>
+      ) : (
+        ''
+      )}
+    </section>
+  )
+}
+
+export default ErrorSection