fix: resolve build & export 404 component

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>
   )
 }

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>
 )
 

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>
 )
 

src/pages/styles.tsx

@@ -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;
-`