import React from 'react';
import PropTypes from 'prop-types';

const LayerInfoModal = function LayerInfoModal(props) {
  return (
    <div className="layer-info-modal">
      <div className="layer-info-content">
        <h2>{props.data.name}</h2>
        <p>{props.data.description}</p>
      </div>
    </div>
  );
};

LayerInfoModal.propTypes = {
  data: PropTypes.object
};

export default LayerInfoModal;

@@ -60,65 +60,389 @@
 s';%0A
-%0Aconst LayerInfoModal = function LayerInfoModal(props
+import %7B Autobind %7D from 'es-decorators';%0Aimport %7B Router %7D from 'routes';%0A%0A// Redux%0Aimport %7B connect %7D from 'react-redux';%0Aimport %7B toggleModal %7D from 'redactions/modal';%0A%0Aclass LayerInfoModal extends React.Component %7B%0A  @Autobind%0A  handleMoreInfo() %7B%0A    this.props.toggleModal(false);%0A    Router.pushRoute( 'explore_detail', %7Bid: this.props.data.dataset%7D );%0A  %7D%0A%0A  render(
 ) %7B%0A
+  
   re
@@ -448,16 +448,18 @@
 eturn (%0A
+  
     %3Cdiv
@@ -489,16 +489,18 @@
 modal%22%3E%0A
+  
       %3Cd
@@ -546,13 +546,20 @@
     
+  
 %3Ch2%3E%7B
+this.
 prop
@@ -588,12 +588,19 @@
     
+  
 %3Cp%3E%7B
+this.
 prop
@@ -623,16 +623,203 @@
 on%7D%3C/p%3E%0A
+          %3Cdiv className=%22buttons%22%3E%0A            %3Cbutton%0A              className=%22c-btn -primary%22%0A              onClick=%7B() =%3E %7Bthis.handleMoreInfo()%7D%7D%0A            %3EMore info%3C/button%3E%0A    
       %3C/
@@ -823,24 +823,28 @@
  %3C/div%3E%0A    
+  
+  
 %3C/div%3E%0A  );%0A
@@ -840,18 +840,37 @@
 /div%3E%0A  
-);
+    %3C/div%3E%0A    );%0A  %7D
 %0A%7D;%0A%0ALay
@@ -901,50 +901,224 @@
 %7B%0A  
-data: PropTypes.object%0A%7D;%0A%0Aexport default 
+toggleModal: PropTypes.func.isRequired,%0A  data: PropTypes.object%0A%7D;%0A%0Aconst mapDispatchToProps = dispatch =%3E (%7B%0A  toggleModal: open =%3E dispatch(toggleModal(open))%0A%7D);%0A%0Aexport default connect(null, mapDispatchToProps)(
 Laye
@@ -1127,10 +1127,11 @@
 nfoModal
+)
 ;%0A

add more info button to layer modal