foo.js

import React from 'react'
import { StyleSheet, css } from 'aphrodite'
import Icon from './Icon'
import {accentColor, white} from '../styles/variables'

const atLeastMedium = '@media only screen and (min-width : 350px)'
const atLeastLarge = '@media only screen and (min-width : 1050px)'

function FooterNav () {
  const {styles} = FooterNav
  return (
    <nav>
      <ul className={css(styles.list)}>
        <li className={css(styles.item)}><a className={css(styles.anchor)} href='#'>About</a></li>
        <li className={css(styles.item)}><a className={css(styles.anchor)} href='#'>Blog</a></li>
        <li className={css(styles.item)}><a className={css(styles.anchor)} href='#'>Developer API</a></li>
        <li className={css(styles.item)}><a className={css(styles.anchor)} href='#'>Privacy Policy</a></li>
        <li className={css(styles.item)}><a className={css(styles.anchor)} href='#'>Terms</a></li>
        <li className={css(styles.item)}><a className={css(styles.anchor)} href='#'>DMCA</a></li>
      </ul>
    </nav>
  )
}
FooterNav.styles = StyleSheet.create({
  list: {
    listStyle: 'none',
    [atLeastMedium]: {
      display: 'flex',
      flexWrap: 'wrap'
    }
  },
  anchor: {
    fontWeight: 'bold',
    color: 'white',
    textDecoration: 'none'
  },
  item: {
    margin: '5px 0',
    ':before': {
      content: '\'●\'',
      color: accentColor,
      paddingRight: 5
    },
    [atLeastMedium]: {
      flex: '1 0 50%'
    }
  }
})

function LanguageList () {
  const {styles} = LanguageList
  return (
    <ul>
      <li className={css(styles.item)}>
        <Icon src='/src/icons/earth.svg' size={16} fill={white} />
        <a className={css(styles.link)} href='#'>English</a>
      </li>
      <li className={css(styles.item)}>
        <Icon src='/src/icons/earth.svg' size={16} fill={white} />
        <a className={css(styles.link)} href='#'>Japanese</a>
      </li>
    </ul>
  )
}
LanguageList.styles = StyleSheet.create({
  item: {
    margin: '5px 0'
  },
  link: {
    color: '#6772a2',
    fontWeight: 'bold',
    textDecoration: 'none',
    marginLeft: 5
  }
})

function Footer () {
  const {styles} = Footer
  return (
    <footer className={css(styles.footer)}>
      <div className={css(styles.col)}>
        <h1 className={css(styles.colHeading)}>MakerHub</h1>
        <p className={css(styles.text)}>Twee man bun chillwave keffiyeh wolf. Brunch yuccie schlitz blog semiotics twee, portland brooklyn.</p>
        <FooterNav />
      </div>
      <div className={css(styles.col)}>
        <h1 className={css(styles.colHeading)}>Mobile</h1>
        <p className={css(styles.text)}>Twee man bun chillwave keffiyeh wolf. Brunch yuccie schlitz blog semiotics twee, portland brooklyn.</p>
        <p className={css(styles.text)}>Twee man bun chillwave keffiyeh wolf. Brunch yuccie schlitz blog semiotics twee, portland brooklyn.</p>
      </div>
      <div className={css(styles.col)}>
        <h1 className={css(styles.colHeading)}>Language</h1>
        <LanguageList />
      </div>
    </footer>
  )
}
Footer.styles = StyleSheet.create({
  footer: {
    padding: 20,
    backgroundColor: '#121832',
    [atLeastLarge]: {
      padding: 50,
      display: 'flex'
    }
  },
  col: {
    margin: '20px 0',
    maxWidth: 350,
    [atLeastLarge]: {
      padding: 50
    }
  },
  colHeading: {
    fontFamily: 'Roboto',
    fontWeight: 'bold',
    fontSize: 22,
    color: white,
    paddingBottom: 24,
    letterSpacing: 1
  },
  text: {
    color: '#6772a2',
    lineHeight: '1.2',
    paddingBottom: 27
  }
})

export default Footer