socialify update

3 files changed, 92 insertions, 0 deletions

diff --git a/src/components/error/__snapshots__/error.test.tsx.snap b/src/components/error/__snapshots__/error.test.tsx.snap
new file mode 100644
index 0000000..9e1289e
--- /dev/null
+++ b/src/components/error/__snapshots__/error.test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Error renders 1`] = `
+<main
+  class="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8"
+>
+  <div
+    class="py-16"
+  >
+    <div
+      class="text-center"
+    >
+      <p
+        class="text-base font-semibold text-error"
+      >
+        404
+      </p>
+      <h1
+        class="mt-2 text-5xl leading-tight font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-secondary to-error"
+      >
+        Page not found.
+      </h1>
+      <p
+        class="mt-2 text-base"
+      >
+        Sorry, we couldn't find the page you're looking for.
+      </p>
+      <div
+        class="mt-6"
+      >
+        <a
+          class="btn btn-primary gap-2"
+          href="/"
+        >
+          Go back home
+          <span
+            aria-hidden="true"
+          >
+            →
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</main>
+`;
diff --git a/src/components/error/error.test.tsx b/src/components/error/error.test.tsx
new file mode 100644
index 0000000..9cd67f9
--- /dev/null
+++ b/src/components/error/error.test.tsx
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react'
+
+import Error from './error'
+
+test('Error renders', () => {
+  const { container } = render(
+    <Error
+      code="404"
+      title="Page not found."
+      description="Sorry, we couldn't find the page you're looking for."
+    />
+  )
+  const error = container.firstElementChild!
+
+  expect(error).toMatchSnapshot()
+})
diff --git a/src/components/error/error.tsx b/src/components/error/error.tsx
new file mode 100644
index 0000000..8a002f7
--- /dev/null
+++ b/src/components/error/error.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import Link from 'next/link'
+
+type ErrorProp = {
+  code: string
+  title: string
+  description: string
+}
+
+const Error: React.FC<ErrorProp> = ({ code, title, description }) => (
+  <main className="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8">
+    <div className="py-16">
+      <div className="text-center">
+        <p className="text-base font-semibold text-error">{code}</p>
+        <h1 className="mt-2 text-5xl leading-tight font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-secondary to-error">
+          {title}
+        </h1>
+        <p className="mt-2 text-base">{description}</p>
+        <div className="mt-6">
+          <Link href="/" className="btn btn-primary gap-2">
+            Go back home
+            <span aria-hidden="true">&rarr;</span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  </main>
+)
+
+export default Error