fix: resolve build & export 404 component

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

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

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>
+      <FourZeroFour title="NOT FOUND" />
-          <SC.StyledH1>NOT FOUND</SC.StyledH1>
-          <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
-      </SC.StyledDiv>
     </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>
+    <FourZeroFour title="ARCHIVE NOT FOUND">
-        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
+      <Location>
-        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+        {({ location }) => (
-    </SC.StyledDiv>
+          <PossibleCorrections
-    <Location>
+            basepath="archives/"
-      {({ location }) => (
+            location={location}
-        <PossibleCorrections
+            data={data}
-          basepath="archives/"
+          />
-          location={location}
+        )}
-          data={data}
+      </Location>
-        />
+    </FourZeroFour>
-      )}
-    </Location>
   </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>
+    <FourZeroFour title="RESOURCE NOT FOUND">
-        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
+      <Location>
-        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+        {({ location }) => (
-    </SC.StyledDiv>
+          <PossibleCorrections
-    <Location>
+            basepath="resources/"
-      {({ location }) => (
+            location={location}
-        <PossibleCorrections
+            data={data}
-          basepath="resources/"
+          />
-          location={location}
+        )}
-          data={data}
+      </Location>
-        />
+    </FourZeroFour>
-      )}
-    </Location>
   </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;
-`