Gisto/Gisto

import React from 'react';
import PropTypes from 'prop-types';
import { graphql, StaticQuery } from 'gatsby';

import Logo from './Logo';

const Footer = ({ data }) => (
  <React.Fragment>
    <div className="push"/>
    <footer>

      <div className="w-container">
        <div className="w-row">

          {data.site.siteMetadata.contributors.map((contributor) => (
            <React.Fragment key={ contributor.name }>
              <div className="w-col w-col-1 w-clearfix">
                <img src={ contributor.gravatar } alt={ contributor.name }/>
              </div>
              <div className="w-col w-col-5 w-clearfix">
                <h3>{contributor.name}</h3>

                <p>
                  <a href={ contributor.site }>
                    { contributor.site.replace('https://', '') }
                  </a> |&nbsp;
                  <a href={ `https://twitter.com/${contributor.twitter_name}` }>
                    <i className="fa fa-twitter"/>
                  </a> |&nbsp;
                  <a href={ `https://github.com/${contributor.github_name}` }>
                    <i className="fa fa-github"/>
                  </a>
                </p>
              </div>
            </React.Fragment>
          ))}

        </div>
      </div>

      <p className="txt-center">&copy; {new Date().getFullYear()} <Logo/></p>

    </footer>

    <a href="#top" className="top innsite"><i className="fa fa-arrow-up"/></a>

  </React.Fragment>
);

Footer.propTypes = {
  data: PropTypes.object
};

export default (props) => (
  <StaticQuery
        query={ graphql`
        query FooterQuery {
          site {
            siteMetadata {
              contributors {
                  name
                  gravatar
                  site
                  twitter_name
                  github_name
                  description
              }
            }
          }
        }
      ` }

        render={ (data) => <Footer data={ data } { ...props }/> }/>
);