add Block component; copyright refactoring

pages/_error.tsx

@@ -2,15 +2,18 @@ import { NextPage } from 'next'
 import { Wrapper } from 'src/components/Wrapper'
 import { NotFound } from 'src/components/NotFound'
 import { Copyright } from 'src/components/Copyright'
+import { Block, Spacer } from 'src/components/Block'
 
 const Page: NextPage = () => (
     <Wrapper
         header={null}
         footer={(
-            <footer className="footer--centered">
+            <footer>
-                <div className="copyright">
+                <Block direction={'horizontal'}>
+                    <Spacer />
                     <Copyright />
-                </div>
+                    <Spacer />
+                </Block>
             </footer>
         )}
     >

src/components/Block/index.tsx

@@ -0,0 +1,29 @@
+import { createElement } from 'react'
+
+export type BlockProps = {
+    style?: React.CSSProperties
+    direction: 'horizontal' | 'vertical'
+}
+
+export const Block: React.FC<BlockProps> = props => {
+    return (
+        <div style={props.style}>
+            <style jsx>{`
+                div {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: baseline;
+                    justify-content: flex-start;
+                }
+            `}</style>
+
+            {props.children}
+        </div>
+    )
+}
+
+export const Spacer: React.FC<{ as?: string }> = ({ as = 'div' }) => createElement(as, {
+    style: {
+        flex: 1,
+    }
+}) 

src/components/Footer/index.tsx

@@ -1,5 +1,6 @@
 import { Copyright } from '../Copyright'
 import { Author } from './Author'
+import { Block, Spacer } from '../Block'
 
 const mailto = email => `mailto:${email}`
 
@@ -23,12 +24,18 @@ export const Footer: React.FC<IFooterProps> = props => (
             </div>
         </div>
 
-        <div className="copyright">
+        <Block direction={'horizontal'} style={{
+            padding: '1.5em 1em 0.25em',
+        }}>
             <Copyright />
+
             {!props.showAuthor ? null : (
-                <Author />
+                <>
+                    <Spacer />
+                    <Author />
+                </>
             )}
-        </div>
+        </Block>
-    </footer>
+    </footer >
 )
 

src/style/footer.scss

@@ -14,24 +14,4 @@ footer {
     }
   }
 
-  .copyright {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    justify-content: space-between;
-
-    span {
-      padding: 1.5em 1em 0.25em;
-      box-sizing: padding-box;
-    }
-  }
-
-  &.footer--centered {
-    .copyright {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
-      justify-content: center;
-    }
-  }
 }