Kutt/client/components/FeaturesItem.tsx

import React, { FC } from 'react';
import styled from 'styled-components';
import { Flex } from 'reflexbox/styled-components';

import { fadeIn } from '../helpers/animations';

interface Props {
  title: string;
  icon: string; // TODO: better typing
}

const Block = styled(Flex).attrs({
  maxWidth: ['100%', '100%', '50%', '25%'],
  flexDirection: 'column',
  alignItems: 'center',
  p: '0 24px',
  mb: [48, 48, 48, 0],
})`
  animation: ${fadeIn} 0.8s ease-out;

  :last-child {
    margin-right: 0;
  }
`;

const IconBox = styled(Flex).attrs({
  width: [40, 40, 48],
  height: [40, 40, 48],
  alignItems: 'center',
  justifyContent: 'center',
})`
  border-radius: 100%;
  box-sizing: border-box;
  background-color: #2196f3;
`;

const Icon = styled.img`
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;

  @media only screen and (max-width: 448px) {
    width: 14px;
    height: 14px;
  }
`;

const Title = styled.h3`
  margin: 16px;
  font-size: 15px;

  @media only screen and (max-width: 448px) {
    margin: 12px;
    font-size: 14px;
  }
`;

const Description = styled.p`
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  text-align: center;

  @media only screen and (max-width: 448px) {
    font-size: 13px;
  }
`;

const FeaturesItem: FC<Props> = ({ children, icon, title }) => (
  <Block>
    <IconBox>
      <Icon src={`/images/${icon}.svg`} />
    </IconBox>
    <Title>{title}</Title>
    <Description>{children}</Description>
  </Block>
);

export default FeaturesItem;