From c6fe8286c856258f87c0bcf71ac4e7bf469de0af Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Fri, 7 Aug 2020 03:10:56 -0400
Subject: [PATCH] fix: resolve build & export 404 component

---
 src/components/FourZeroFour/index.tsx  | 20 ++++++++++++++++++++
 src/components/FourZeroFour/styles.tsx | 21 +++++++++++++++++++++
 src/pages/404.tsx                      |  7 ++-----
 src/pages/archives/404.tsx             | 26 ++++++++++++--------------
 src/pages/resources/404.tsx            | 26 ++++++++++++--------------
 src/pages/styles.tsx                   | 21 ---------------------
 6 files changed, 67 insertions(+), 54 deletions(-)
 create mode 100644 src/components/FourZeroFour/index.tsx
 create mode 100644 src/components/FourZeroFour/styles.tsx
 delete mode 100644 src/pages/styles.tsx

diff --git a/src/components/FourZeroFour/index.tsx b/src/components/FourZeroFour/index.tsx
new file mode 100644
index 0000000..d6b3580
--- /dev/null
+++ b/src/components/FourZeroFour/index.tsx
@@ -0,0 +1,20 @@
+import React, { FC, Fragment } from "react"
+import * as SC from "./styles"
+
+interface IPossibleCorrections {
+  title: string
+}
+
+export const FourZeroFour: FC<IPossibleCorrections> = ({ children }) => {
+  return (
+    <Fragment>
+      <SC.Wrapper>
+        <SC.Title>NOT FOUND</SC.Title>
+        <SC.Text>
+          You just hit a route that doesn&#39;t exist... the sadness.
+        </SC.Text>
+      </SC.Wrapper>
+      {children}
+    </Fragment>
+  )
+}
diff --git a/src/components/FourZeroFour/styles.tsx b/src/components/FourZeroFour/styles.tsx
new file mode 100644
index 0000000..9ae75a0
--- /dev/null
+++ b/src/components/FourZeroFour/styles.tsx
@@ -0,0 +1,21 @@
+import styled from "styled-components"
+
+export const Wrapper = styled.div`
+  padding: 100px 20px 20px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`
+
+export const Title = styled.h1`
+  margin: 0;
+  padding: 10px;
+  line-height: 2.5rem;
+`
+
+export const Text = styled.p`
+  margin: 0;
+  padding: 10px;
+  line-height: 2rem;
+`
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 193c255..24c279b 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,16 +1,13 @@
 import React, { Fragment } from "react"
-import * as SC from "./styles"
 
 import { SEO } from "../components/SEO"
+import { FourZeroFour } from "../components/FourZeroFour"
 
 function NotFoundPage() {
   return (
     <Fragment>
       <SEO title="404: Not found" />
-      <SC.StyledDiv>
-          <SC.StyledH1>NOT FOUND</SC.StyledH1>
-          <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
-      </SC.StyledDiv>
+      <FourZeroFour title="NOT FOUND" />
     </Fragment>
   )
 }
diff --git a/src/pages/archives/404.tsx b/src/pages/archives/404.tsx
index b949ce3..9cc24c3 100644
--- a/src/pages/archives/404.tsx
+++ b/src/pages/archives/404.tsx
@@ -1,30 +1,28 @@
 import { Location } from "@reach/router"
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
-import * as SC from "../styles"
 
 import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
 import { SEO } from "../../components/SEO"
 
 import { PossibleCorrections } from "../../components/404LinkCorrection"
+import { FourZeroFour } from "../../components/FourZeroFour"
 
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Archive Not found" />
-    <SC.StyledDiv>
-        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
-        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
-    </SC.StyledDiv>
-    <Location>
-      {({ location }) => (
-        <PossibleCorrections
-          basepath="archives/"
-          location={location}
-          data={data}
-        />
-      )}
-    </Location>
+    <FourZeroFour title="ARCHIVE NOT FOUND">
+      <Location>
+        {({ location }) => (
+          <PossibleCorrections
+            basepath="archives/"
+            location={location}
+            data={data}
+          />
+        )}
+      </Location>
+    </FourZeroFour>
   </Fragment>
 )
 
diff --git a/src/pages/resources/404.tsx b/src/pages/resources/404.tsx
index bf47f64..59d183a 100644
--- a/src/pages/resources/404.tsx
+++ b/src/pages/resources/404.tsx
@@ -1,29 +1,27 @@
 import { Location } from "@reach/router"
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
-import * as SC from "../styles"
 
 import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
 import { PossibleCorrections } from "../../components/404LinkCorrection"
 import { SEO } from "../../components/SEO"
+import { FourZeroFour } from "../../components/FourZeroFour"
 
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Resource Not found" />
-    <SC.StyledDiv>
-        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
-        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
-    </SC.StyledDiv>
-    <Location>
-      {({ location }) => (
-        <PossibleCorrections
-          basepath="resources/"
-          location={location}
-          data={data}
-        />
-      )}
-    </Location>
+    <FourZeroFour title="RESOURCE NOT FOUND">
+      <Location>
+        {({ location }) => (
+          <PossibleCorrections
+            basepath="resources/"
+            location={location}
+            data={data}
+          />
+        )}
+      </Location>
+    </FourZeroFour>
   </Fragment>
 )
 
diff --git a/src/pages/styles.tsx b/src/pages/styles.tsx
deleted file mode 100644
index 2acd9b6..0000000
--- a/src/pages/styles.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styled from "styled-components"
-
-export const StyledDiv = styled.div`
-    width: 100%;
-    padding: 20px;
-    padding-top: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-`
-export const StyledH1 = styled.h1`
-    margin: 0;
-    padding: 10px;
-    line-height: 2.5rem;
-`
-export const StyledPara = styled.p`
-    margin: 0;
-    padding: 10px;
-    line-height: 2rem;
-`
\ No newline at end of file