Embedded Styles

avatar.js

import React, { Component, PropTypes } from 'react';
import styled from 'styled-components';

const AvatarDiv = styled.div`
  border-radius: 0.2px;
  border: 1px solid #eee;
`;

const BumpSpan = styled.span`
  position: relative;
  top: -10px;
`;

const Avatar = ({ name, avatar_url, onBump }) => (
  <AvatarDiv>
    <img src={avatar_url} title={name} />
    <BumpSpan class="image-action" onClick={onBump}>Bump</BumpSpan>
  </AvatarDiv>
);

Avatar.propTypes = {
  name: PropTypes.string.isRequired,
  avatar_url: PropTypes.string.isRequired,
  onBump: PropTypes.func.isRequired,
};