{"size": 1244, "ext": "js", "max_stars_repo_path": "components/Footer.js", "max_stars_repo_name": "madumas/developer-portal", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/Footer.js", "max_issues_repo_name": "madumas/developer-portal", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/Footer.js", "max_forks_repo_name": "madumas/developer-portal", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.619047619, "max_line_length": 88, "alphanum_fraction": 0.4501607717}
/** @jsx jsx */
import { jsx, Grid, Flex, NavLink, Text, Container } from 'theme-ui';
import Link from 'next/link';
import footerContent from '../data/footer.json';
import EmailSignup from './EmailSignup';

const Footer = () => {
  return (
    <Container as="footer">
      <Flex sx={{ justifyContent: 'space-between' }}>
        {footerContent.map(({ title, items }) => {
          return (
            <Grid as="nav" sx={{ GridDirection: 'column' }} key={title}>
              <Text sx={{ fontWeight: 'heading', fontFamily: 'heading' }}>{title}</Text>
              {items.map(({ name }) => {
                return (
                  <Text
                    sx={{
                      fontFamily: 'heading',
                    }}
                    key={name}
                  >
                    {name}
                  </Text>
                );
              })}
            </Grid>
          );
        })}
        <Flex sx={{ flexDirection: 'column' }}>
          <Text sx={{ fontWeight: 'heading', fontFamily: 'heading' }}>
            Signup for our newsletter
          </Text>
          <EmailSignup placeholder="Enter your email address" />
        </Flex>
      </Flex>
    </Container>
  );
};

export default Footer;
