Add Facebook icon

zoltantothcom · zoltantothcom · commit 5cc713158569 · 2019-05-15T13:26:08.000-04:00
diff --git a/src/Layout.jsx b/src/Layout.jsx
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import styleLight from './styles/hljs/hljs.light';
 import styleDark from './styles/hljs/hljs.dark';
 import Header from './components/Header';
+import Footer from './components/Footer';
 import GlobalStyle from './styles/global';
 import { themeCommon } from './styles/themes/theme.common';
 import { themeLight } from './styles/themes/theme.light';
@@ -38,6 +39,8 @@ const Layout = props => {
           <Route path="/about" component={About} />
           <Redirect to="/" />
         </Switch>
+
+        <Footer />
       </React.Fragment>
     </ThemeProvider>
   );
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ICON_FACEBOOK } from '../static/icons';
+
+const FooterContainer = styled.footer`
+  display: flex;
+  justify-content: center;
+  margin-top: 5rem;
+
+  a {
+    border: 1px solid ${props => props.theme.buttonBackground};
+    border-radius: 50%;
+    display: inline-flex;
+    padding: 0.5rem;
+
+    :hover svg,
+    :active svg {
+      fill: ${props => props.theme.toggleFillHover};
+    }
+  }
+
+  svg {
+    fill: ${props => props.theme.buttonBackground};
+    transition: 0.2s;
+  }
+`;
+
+const Footer = () => (
+  <FooterContainer>
+    <a href="https://www.facebook.com/sharer.php?u=https://designpatternsgame.com/" target="_blank">
+      {ICON_FACEBOOK}
+    </a>
+  </FooterContainer>
+);
+
+export default Footer;
diff --git a/src/static/icons/index.js b/src/static/icons/index.js
@@ -37,3 +37,10 @@ export const SUN_FILLED = (
     <path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" />
   </Fragment>
 );
+
+export const ICON_FACEBOOK = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
+    <title>facebook</title>
+    <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z" />
+  </svg>
+);
