From 01eaffaf1426f6e0dcb6411efab8b9f0b3da315f Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 18 Feb 2020 14:53:36 +0300
Subject: [PATCH] add Block component; copyright refactoring

---
 pages/_error.tsx                |  9 ++++++---
 src/components/Block/index.tsx  | 29 +++++++++++++++++++++++++++++
 src/components/Footer/index.tsx | 15 +++++++++++----
 src/style/footer.scss           | 20 --------------------
 4 files changed, 46 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Block/index.tsx

diff --git a/pages/_error.tsx b/pages/_error.tsx
index dff192bb..a8f132fd 100644
--- a/pages/_error.tsx
+++ b/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">
-                <div className="copyright">
+            <footer>
+                <Block direction={'horizontal'}>
+                    <Spacer />
                     <Copyright />
-                </div>
+                    <Spacer />
+                </Block>
             </footer>
         )}
     >
diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx
new file mode 100644
index 00000000..a6888a9b
--- /dev/null
+++ b/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,
+    }
+}) 
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 2f7df176..092c4607 100644
--- a/src/components/Footer/index.tsx
+++ b/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>
-    </footer>
+        </Block>
+    </footer >
 )
 
diff --git a/src/style/footer.scss b/src/style/footer.scss
index ed042cf0..c33dcbbb 100644
--- a/src/style/footer.scss
+++ b/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;
-    }
-  }
 }
\ No newline at end of file