footer / block / contacts refactoring

pages/_error.tsx

@@ -9,13 +9,11 @@ const Page: NextPage = () => (
     <Wrapper
         header={null}
         footer={(
-            <footer>
-                <Block direction={'horizontal'}>
-                    <Spacer />
-                    <Copyright />
-                    <Spacer />
-                </Block>
-            </footer>
+            <Block as={'footer'} direction={'horizontal'}>
+                <Spacer />
+                <Copyright />
+                <Spacer />
+            </Block>
         )}
     >
         <NotFound />

src/components/App/AppFooter.tsx

@@ -1,20 +0,0 @@
-import { Footer } from '../Footer'
-import { useContext } from 'react'
-import { ConfigContext } from 'src/context/ConfigContext'
-
-export type AppFooterProps = {
-    showAuthor: boolean
-}
-
-export const AppFooter: React.FC<AppFooterProps> = props => {
-    const config = useContext(ConfigContext)
-
-    return (
-        <Footer
-            showAuthor={props.showAuthor}
-            address={config.address}
-            telephone={config.telephone}
-            email={config.email}
-        />
-    )
-}

src/components/App/index.tsx

@@ -6,7 +6,7 @@ import { Wrapper } from '../Wrapper'
 import { Header } from './Header'
 import { ConfigContext } from 'src/context/ConfigContext'
 import config from 'src/config'
-import { AppFooter } from './AppFooter'
+import { Footer } from '../Footer'
 
 const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), {
     ssr: false,
@@ -33,7 +33,7 @@ export const App: React.FC<IAppProps> = props => {
                     </Header>
                 )}
                 footer={(
-                    <AppFooter
+                    <Footer
                         showAuthor={props.showAuthor}
                     />
                 )}

src/components/Block/index.tsx

@@ -1,11 +1,16 @@
+import cx from 'classnames'
+import { createElement } from 'react'
+
 export type BlockProps = {
+    as?: keyof HTMLElementTagNameMap
     style?: React.CSSProperties
     direction: 'horizontal' | 'vertical'
 }
 
-export const Block: React.FC<BlockProps> = props => {
-    return (
-        <div style={props.style}>
+export const Block: React.FC<BlockProps> = ({ as = 'div', style, direction, ...props }) => {
+    const newProps = { className: cx(direction), style }
+    const children = (
+        <>
             <style jsx>{`
                 div {
                     display: flex;
@@ -13,9 +18,19 @@ export const Block: React.FC<BlockProps> = props => {
                     align-items: baseline;
                     justify-content: flex-start;
                 }
+
+                .horizontal {
+                    flex-direction: row;
+                }
+
+                .vertical {
+                    flex-direction: column;
+                }
             `}</style>
 
             {props.children}
-        </div>
+        </>
     )
+
+    return createElement(as, newProps, children)
 }

src/components/Contacts/index.tsx

@@ -0,0 +1,27 @@
+import { useContext } from 'react'
+import { ConfigContext } from 'src/context/ConfigContext'
+
+export const Contacts: React.FC = props => {
+    const { contacts } = useContext(ConfigContext)
+
+    return (
+        <>
+            <style jsx>{`
+                h4 {
+                    margin-bottom: var(--half-margin);
+                }
+
+                p {
+                    margin-left: var(--single-margin);
+                    margin-bottom: var(--half-margin);
+                }
+            `}</style>
+
+            <h4>Контактная информация</h4>
+
+            {contacts.map((x, i) => (
+                <p><a href={x.value}>{x.title}</a></p>
+            ))}
+        </>
+    )
+}

src/components/Footer/index.tsx

@@ -2,32 +2,21 @@ import { Copyright } from '../Copyright'
 import { Author } from './Author'
 import { Block } from '../Block'
 import { Spacer } from '../Spacer'
-
-const mailto = email => `mailto:${email}`
+import { Contacts } from '../Contacts'
 
 export interface IFooterProps {
-    address: string
-    telephone: string
-    email: string
     showAuthor: boolean
 }
 
 export const Footer: React.FC<IFooterProps> = props => (
     <footer>
-        <div className="contacts">
-            <div>
-                <h4>Контактная информация</h4>
-                <p>Адрес: {props.address}</p>
-                <p>Телефон: {props.telephone}</p>
-                <p>Почта: <a href={mailto(props.email)}>{props.email}</a></p>
-                <p>Вконтакте: <a href="https://vk.com/shlisselburghudozka">shlisselburghudozka</a></p>
-                <p>Инстаграм: <a href="https://www.instagram.com/hudozka/">hudozka</a></p>
-            </div>
-        </div>
-
-        <Block direction={'horizontal'} style={{
-            padding: '1.5em 1em 0.25em',
+        <Block direction={'vertical'} style={{
+            marginBottom: 'var(--single-margin)',
         }}>
+            <Contacts />
+        </Block>
+
+        <Block direction={'horizontal'}>
             <Copyright />
 
             {!props.showAuthor ? null : (

src/config.ts

@@ -1,9 +1,33 @@
 const currentYear = () => (new Date()).getFullYear()
 
 export default {
-    address: "г. Шлиссельбург ул. 18 января д. 3",
-    telephone: "+7 (81362) 76-312",
-    email: "hudozka@gmail.com",
     yearStart: 2012,
     yearEnd: currentYear(),
+    contacts: [
+        {
+            type: 'link',
+            value: 'https://yandex.ru/maps/-/CKUkAXIb',
+            title: 'г. Шлиссельбург ул. 18 января д. 3',
+        },
+        {
+            type: 'tel',
+            value: 'tel:+78136276312',
+            title: '+7 (81362) 76-312',
+        },
+        {
+            type: 'email',
+            value: 'mailto:hudozka@gmail.com',
+            title: 'hudozka@gmail.com',
+        },
+        {
+            type: 'link',
+            value: 'https://vk.com/shlisselburghudozka',
+            title: 'Вконтакте'
+        },
+        {
+            type: 'link',
+            value: 'https://www.instagram.com/hudozka',
+            title: 'Инстаграм'
+        }
+    ]
 }

src/style/footer.scss

@@ -1,17 +1,3 @@
 footer {
-  padding: 0 var(--half-margin) var(--half-margin);
-  position: relative;
-
-  .contacts {
-    margin: var(--double-margin) 0 var(--half-margin);
-
-    & > div {
-      padding: 0 var(--single-margin);
-    }
-
-    p {
-      margin: var(--half-margin) var(--single-margin);
-    }
-  }
-
-}
+    padding: var(--single-margin);
+}