Spacer typings improved; moved to separate component

pages/_error.tsx

@@ -2,7 +2,8 @@ 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'
+import { Block } from 'src/components/Block'
+import { Spacer } from 'src/components/Spacer'
 
 const Page: NextPage = () => (
     <Wrapper

src/components/Block/index.tsx

@@ -1,5 +1,3 @@
-import { createElement } from 'react'
-
 export type BlockProps = {
     style?: React.CSSProperties
     direction: 'horizontal' | 'vertical'
@@ -21,9 +19,3 @@ export const Block: React.FC<BlockProps> = props => {
         </div>
     )
 }
-
-export const Spacer: React.FC<{ as?: string }> = ({ as = 'div' }) => createElement(as, {
-    style: {
-        flex: 1,
-    }
-}) 

src/components/Footer/index.tsx

@@ -1,6 +1,7 @@
 import { Copyright } from '../Copyright'
 import { Author } from './Author'
-import { Block, Spacer } from '../Block'
+import { Block } from '../Block'
+import { Spacer } from '../Spacer'
 
 const mailto = email => `mailto:${email}`
 
@@ -31,7 +32,7 @@ export const Footer: React.FC<IFooterProps> = props => (
 
             {!props.showAuthor ? null : (
                 <>
-                    <Spacer />
+                    <Spacer as={'span'} />
                     <Author />
                 </>
             )}

src/components/Spacer/index.tsx

@@ -0,0 +1,11 @@
+import { createElement } from 'react'
+
+export type SpacerProps = {
+    as?: keyof HTMLElementTagNameMap
+}
+
+export const Spacer: React.FC<SpacerProps> = ({ as = 'div' }) => createElement(as, {
+    style: {
+        flex: 1,
+    }
+})