import React from 'react'
import glamorous, {Div} from 'glamorous'
import {Anchor} from '../components/styled-links'
import {withContent} from './locale'

const Container = glamorous.div({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  '& > h3': {
    margin: '20px',
  },
})

const Img = glamorous.img({
  height: 45,
  width: 45,
  borderRadius: '100%',
  margin: '0 5px',
  transition: 'transform .3s',
  '&:focus, &:hover, &:active': {
    transform: 'scale(1.2)',
  },
})

const contributor = username =>
  (<Anchor key={username} href={`https://github.com/${username}`}>
    <Img src={`https://github.com/${username}.png?size=90`} />
  </Anchor>)

export default withContent({component: 'contributors'}, Contributors)
function Contributors({content, contributors = []}) {
  if (contributors.length === 0) {
    return <noscript />
  }

  return (
    <Container>
      <h3>{content.header}</h3>
      <Div>
        {contributors.map(contributor)}
      </Div>
    </Container>
  )
}

@@ -631,16 +631,22 @@
     %3CImg
+%0A     
  src=%7B%60h
@@ -688,16 +688,62 @@
 ize=90%60%7D
+%0A      alt=%7B%60$%7Busername%7D's GitHub avatar%60%7D%0A   
  /%3E%0A  %3C/

Add alt tag to contributor avatars (#171)