fullstack-hy2020.github.io/src/components/Footer/Footer.js at 0138dd3bd3176f4b8a549b06f8f8890ade26c5e4 · fullstack-hy2020/fullstack-hy2020.github.io · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { Link } from 'gatsby';
import React from 'react';
import { useTranslation } from 'react-i18next';
import i18n from 'i18next';

import './Footer.scss';

import Element from '../Element/Element';
import { Image } from '../Image/Image';
import houston from '../../images/company_logos/houston.svg';
import { getNavigation } from '../Navigation/Navigation';
import yliopisto from '../../images/company_logos/uoh_centre.svg';

const images = [
  {
    src: yliopisto,
    alt: 'Helsingin yliopiston logo',
    href: 'https://www.helsinki.fi/',
  },
  {
    src: houston,
    alt: 'Houston inc. logo',
    href: 'https://www.houston-inc.com/',
  },
];

const Footer = () => {
  const { t, i18n } = useTranslation();
  const navigation = getNavigation(i18n.language, t);

  const isRtl = i18n.dir()  === 'rtl';

  return (
    <Element
      Tag="footer"
      id="footer"
      className="container spacing--after-small spacing--mobile"
      flex
    >
      <Element
        className={`col-5 ${isRtl ? 'push-left-3' : 'push-right-3'} col-10--mobile order-2--mobile order-2--tablet footer__links`}
        flex
        spaceBetween
      >
        {images.map((image) => (
          <a
            key={image.alt}
            href={image.href}
            className="col-5 col-4--mobile spacing--mobile"
          >
            <Image
              contain
              darkThemeInvert
              src={image.src}
              alt={image.alt}
              className="col-6"
            />
          </a>
        ))}
      </Element>

      <Element
        flex
        className="col-5 col-5--mobile order-1--mobile order-1--tablet footer__navigation"
      >
        <div className="footer__navigation-link-container">
          {navigation.map((item) => (
            <Link
              key={item.path}
              to={item.path}
              className="footer__navigation-link nav-item-hover"
              style={{ marginLeft: '4.5rem' }}
            >
              {item.text}
            </Link>
          ))}
        </div>
      </Element>
    </Element>
  );
};

export default Footer;