Merge pull request #220 from the-programmers-hangout/ui-footer-below-pages

ui: add footer below pages

src/components/Footer/index.tsx

@@ -3,9 +3,9 @@ import packageJson from "../../../package.json"
 import { Container } from "../Container"
 import * as SC from "./styles"
 
-export const HomeFooter: FC = () => {
+export const Footer: FC = () => {
   return (
-    <SC.HomeFooterWrapper>
+    <SC.FooterWrapper>
       <Container>
         <p>
           © {new Date().getFullYear()}, Built with
@@ -14,6 +14,6 @@ export const HomeFooter: FC = () => {
           <a href={packageJson.repository.url}>GitHub</a>
         </p>
       </Container>
-    </SC.HomeFooterWrapper>
+    </SC.FooterWrapper>
   )
 }

src/components/Footer/styles.tsx

@@ -1,6 +1,8 @@
 import styled from "styled-components"
 
-export const HomeFooterWrapper = styled.footer`
+export const FooterWrapper = styled.footer`
+  margin-top: 128px;
+
   & a {
     display: inline;
     color: #0090d8;

src/layouts/ColumnLayout/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, Fragment } from "react"
 
+import { Footer } from "../../components/Footer"
 import { MobileHeader } from "../../components/MobileHeader"
 import { GlobalStyles } from "../../globalStyles"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
@@ -39,7 +40,10 @@ const InnerColumnLayout: FC<IColumnLayoutProps> = ({
         <MobileHeader openMenu={openMenu}>{title}</MobileHeader>
         {sidebar({ className: openOnMobile ? "is-open" : "" })}
         <SC.MainContent>
-          <SC.Container>{content}</SC.Container>
+          <SC.Container>
+            {content}
+            <Footer />
+          </SC.Container>
         </SC.MainContent>
       </SC.Main>
       <SC.Overlay