React Components

Image.js

import Radium from 'radium';
import { PropTypes } from 'react';

export default class Image {
  static propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired
  }

  render() {
    return (
      <img
        src={this.props.src}
        alt={this.props.alt}
        style={{ width: '100%', height: '100%' }}/>
    );
  }
}

Loader.js

const rotate = Radium.keyframes({
  '0%': { transform: 'rotate(0)' },
  '100%': { transform: 'rotate(360deg)' }
});

class Loader {
  static propTypes = {
    border: PropTypes.string,
    color: PropTypes.string,
    height: PropTypes.number,
    width: PropTypes.number
  }

  static defaultProps = {
    border: '2px',
    color: '#000000',
    height: 25,
    width: 25
  }

  render() {
    return (
      <div
        style={{
          width: this.props.width,
          height: this.props.height,
          border: `${this.props.border} solid ${this.props.color}`,
          borderBottomColor: 'transparent',
          borderRadius: '50%',
          animation: `${rotate} .75s linear infinite`
        }} />
    );
  }
}