From 49166600270cf57fdd47c4431a558eed5751f020 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 16:28:23 -0800
Subject: [PATCH] Add ErrorSection component

This lets us render errors gracefully
---
 components/ErrorSection/index.scss | 22 ++++++++++++++
 components/ErrorSection/index.tsx  | 48 ++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 components/ErrorSection/index.scss
 create mode 100644 components/ErrorSection/index.tsx

diff --git a/components/ErrorSection/index.scss b/components/ErrorSection/index.scss
new file mode 100644
index 00000000..587d9ff9
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/components/ErrorSection/index.tsx b/components/ErrorSection/index.tsx
new file mode 100644
index 00000000..f0b904c6
--- /dev/null
+++ b/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