import React from 'react';
import { AlignCenter , FlexAJ  } from '../Component/layout';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder';

function Contributors({contributors,owner,projectsId}){
  return(
    <div>
      <FlexAJ>
        <AlignCenter><span className="font-16 color-grey-6">贡献者</span>{ contributors && contributors.total_count > 0 && <span className="infoCount">{contributors.total_count}</span>}</AlignCenter>
        <Link className="font-12 color-grey-9" to={`/projects/${owner}/${projectsId}/contribute`}>全部</Link>
      </FlexAJ>
      <div className="attrPerson">
        {
          contributors && contributors.total_count > 0 ?
          contributors.list.map((item,key)=>{
            return(
              <Link key={key} to={`/users/${item.login}`}><img src={getImageUrl(`images/${item.image_url}`)} alt=""/></Link>
            )
          })
          :""
        }
      </div>
    </div>
  )
}
export default Contributors;