{"size": 1785, "ext": "js", "max_stars_repo_path": "src/components/Service.js", "max_stars_repo_name": "abit-company/abit.company", "max_stars_repo_stars_event_min_datetime": "2018-04-11T08:06:50.000Z", "max_stars_repo_stars_event_max_datetime": "2018-04-11T08:06:50.000Z", "max_issues_repo_path": "src/components/Service.js", "max_issues_repo_name": "abit-company/abit.company", "max_issues_repo_issues_event_min_datetime": "2018-02-28T07:49:22.000Z", "max_issues_repo_issues_event_max_datetime": "2018-02-28T07:49:22.000Z", "max_forks_repo_path": "src/components/Service.js", "max_forks_repo_name": "abit-company/abit.company", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 19.6153846154, "max_line_length": 75, "alphanum_fraction": 0.6201680672}
import React from 'react';
import styled from 'styled-components/macro';

const Service = ({ className, service: { icon, title, description } }) => (
  <Wrapper className={className}>
    <IconContainer>
      <Icon src={`/assets/images/${ icon }`} alt={`${ title } icon`} />
    </IconContainer>

    <TextContainer>
      <Name>{title}</Name>
      <Description>{description}</Description>
    </TextContainer>
  </Wrapper>
);

const Wrapper = styled.div`
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: left;
  &:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
  }
`;

const IconContainer = styled.div`
  padding: 20px 20px 20px 20px;
  box-sizing: border-box;
  flex-basis: 25%;
  @media (max-width: 800px) {
    flex-basis: 33.33%;
    margin: 0 auto;
  }
  @media (max-width: 600px) {
    flex-basis: 50%;
  }
`;

const Icon = styled(({ children, className, src, alt }) => (
  <div className={className}>
    <img src={src} alt={alt} />
    {children}
  </div>
))`
  background-color: #f2f2f2;
  border-radius: 10px;
  position: relative;
  img {
    width: 100%;
  }
`;

const TextContainer = styled.div`
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  @media (max-width: 960px) {
    flex-basis: 75%;
  }
  @media (max-width: 800px) {
    flex-basis: 100%;
    text-align: center;
    padding-bottom: 50px;
  }
`;

const Name = styled.p`
  font-size: 20px;
  font-weight: 600;
  color: #0c35fb;
  width: 100%;
`;

const Description = styled.p`
  font-size: 16px;
  font-weight: 600;
  color: #000629;
  padding-top: 20px;
  width: 100%;
  line-height: 1.4em;
`;

export default styled(Service)``;
