Design-Patterns-JavaScript/src/components/Footer.jsx at dev · codeallyio/Design-Patterns-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React from 'react';
import styled from 'styled-components';
import {
  ICON_TWITTER,
  ICON_FACEBOOK,
  ICON_LINKEDIN,
  ICON_REDDIT,
  ICON_GITHUB
} 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;
    margin: 0.75rem;
    padding: 0.5rem;

    :hover svg,
    :focus svg {
      fill: ${props => props.theme.toggleFillHover};
    }
  }

  svg {
    fill: ${props => props.theme.buttonBackground};
    transition: 0.2s;
  }
`;

const Footer = () => (
  <FooterContainer>
    <a
      href="https://twitter.com/intent/tweet?url=https://designpatternsgame.com&text=Test%20your%20familiarity%20with%20the%20Gang%20of%20Four%20design%20patterns%20implemented%20in%20JavaScript"
      target="_blank"
    >
      {ICON_TWITTER}
    </a>
    <a href="https://www.facebook.com/sharer.php?u=https://designpatternsgame.com/" target="_blank">
      {ICON_FACEBOOK}
    </a>
    <a
      href="https://www.linkedin.com/shareArticle?mini=true&url=https://designpatternsgame.com&title=Design%20Patterns%20Game&summary=A%20game%20to%20test%20your%20familiarity%20with%20the%20Gang%20of%20Four%20design%20patterns%20implemented%20in%20JavaScript."
      target="_blank"
    >
      {ICON_LINKEDIN}
    </a>
    <a
      href="https://reddit.com/submit?url=https://designpatternsgame.com&title=Design%20Patterns%20Game"
      target="_blank"
    >
      {ICON_REDDIT}
    </a>
    <a href="https://github.com/zoltantothcom/Design-Patterns-JavaScript" target="_blank">
      {ICON_GITHUB}
    </a>
  </FooterContainer>
);

export default Footer;