Moto React

Moto

class Wheel extends React.Component {
  constructor (props) { 
    super(props);
    this.props.image = "https://s3.amazonaws.com/code_brian/react/Front+Wheel.png";
  }
  
  render() {
      var styles = {
        wheel: {
          position: "absolute",
          top: this.props.top + "px",
          right: this.props.right + "px",
          width: "120px",
          height: "120px",
          margin: "-60px 0 0 -60px",
          animation: "spin 4s linear infinite"
        }
      };
	  return (
          <img 
          style={styles.wheel}
          src={this.props.image}>
            
          </img>
      );
    }
}

class BackWheel extends Wheel {
  constructor (props) { 
    super(props);
    this.props.image = "https://s3.amazonaws.com/code_brian/react/Back+Wheel.png";
  }
}

class Chassis extends React.Component {
  render() {
    var styles = {
      chassis: {
        position: "absolute",
        top: this.props.top + "px",
        right: this.props.right + "px",
        width: "200px"
      }
    }
    return (
      <img style={styles.chassis} src="https://s3.amazonaws.com/code_brian/react/Chassis.png">
        
      </img>
    )
  }
}

class Motor extends React.Component {
  render() {
    var styles = {
      motor: {
        position: "absolute",
        top: this.props.top + "px",
        right: this.props.right + "px",
        width: "100px"
      }
    }
    return (
      <img style={styles.motor} src="https://s3.amazonaws.com/code_brian/react/Motor.png"></img>
    )
  }
}


class Exhaust extends React.Component {
  render() {
    var styles = {
      exhaust: {
        position: "absolute",
        top: this.props.top + "px",
        right: this.props.right + "px",
        width: "150px"
      }
    }
  return (
    <img style={styles.exhaust} src="https://s3.amazonaws.com/code_brian/react/Exhaust.png"></img>
  );
  }
}

class BodyPanels extends React.Component {
  render() {
    var styles = {
      exhaust: {
        position: "absolute",
        top: this.props.top + "px",
        right: this.props.right + "px",
        width: "300px"
      }
    }
  return (
    <img style={styles.exhaust} src="https://s3.amazonaws.com/code_brian/react/Body.png"></img>
  );
  }
}


class Moto extends React.Component {
  render() {
    var styles = {
      moto: {
        top: this.props.top + "px",
        right: this.props.right + "px",
        position: "relative"
      }
    }
    return (
      <div style={styles.moto}>
      <BackWheel top="150" right="270"></BackWheel>
      <Wheel top="150" right="50"></Wheel>
      <Motor top="70" right="150"></Motor>
      <Chassis top="50" right="130"></Chassis>
      <Exhaust top="90" right="150"></Exhaust>
      <BodyPanels top="10" right="90"></BodyPanels>
      </div>
    )
  }
}

React.render(
  <div>
    <Moto top="100" right="100"></Moto>
  </div>,
  
  document.getElementById('mount-point')
);