ipfs-boards/webapp/components/status-components.jsx

var React = require('react')
var Icon = require('icon.jsx')

var Error = React.createClass({
  render () {
    return <div>
      <div className='text-center'>
        <Icon className='center-block fa-3x light' name='ban' />
        <h4 className='top-half-em'>Ooops</h4>
        <p>{'' + this.props.error || 'Something went wrong'}</p>
        { this.props.children }
      </div>
    </div>
  }
})

var Loading = React.createClass({
  render () {
    return <div className='loading' >
      <div className='text-center'>
        <Icon className='center-block fa-spin fa-3x light' name='refresh' />
        <h4 className='top-half-em'>{this.props.title}</h4>
        { this.props.children }
      </div>
    </div>
  }
})

var Saving = React.createClass({
  render () {
    return <div>
      <div className='text-center'>
        <Icon className='center-block fa-spin fa-3x light' name='refresh' />
        <h4 className='top-half-em'>{ this.props.title || 'Publishing' }</h4>
        { this.props.children }
      </div>
    </div>
  }
})

var Success = React.createClass({
  render () {
    return <div>
      <div className='text-center'>
        <Icon className='center-block fa-3x light' name='check' />
        <h4 className='top-half-em'>{ this.props.title || 'Done' }</h4>
        { this.props.children }
      </div>
    </div>
  }
})

module.exports = { Error, Loading, Saving, Success }