import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';

class MembersPreview extends Component {

  render() {
    const {displayName, searchImg, intro, slug} = this.props;

    return (
      <div className="col-xs-12 col-sm-4 col-md-3">
        <div className="thumbnail" style={{
          height: '300px',
          background: 'rgba(243,243,243,1)',
          border: '0',
          borderRadius: '0',
          padding: '20px 10px',
        }}>
          <div style={{
            maxHeight: '95%',
            overflowY: 'auto',
          }}>
            {
              searchImg &&
              <img src={searchImg.url} style={{
                maxHeight: '125px',
                margin: 'auto',
                display: 'block',
              }}/>
            }
            <div className="caption">
              <h4 className="nomargin" style={{
                textAlign: 'center',
              }}>
                <Link to={ `/members/${slug}` }>{displayName}</Link>
              </h4>
              <p dangerouslySetInnerHTML={{ __html: intro }} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

MembersPreview.propTypes = {
  displayName: PropTypes.string.isRequired,
  searchImg: PropTypes.shape({
    url: PropTypes.string.isRequired,
    height: PropTypes.number,
    width: PropTypes.number,
  }),
  intro: PropTypes.string,
  slug: PropTypes.string.isRequired,
  usState: PropTypes.string,
};

export default MembersPreview;

@@ -638,11 +638,78 @@
    %3C
-img
+Link to=%7B %60/members/$%7Bslug%7D%60 %7D%3E%0A                %3Cimg%0A                 
  src
@@ -724,16 +724,34 @@
 Img.url%7D
+%0A                 
  style=%7B
@@ -760,32 +760,36 @@
                 
+   
+ 
 maxHeight: '125p
@@ -808,16 +808,20 @@
         
+    
 margin: 
@@ -820,32 +820,36 @@
 margin: 'auto',%0A
+    
                 
@@ -884,11 +884,54 @@
     
-%7D%7D/
+    %7D%7D%0A                /%3E%0A              %3C/Link
 %3E%0A  

Make images clickable on members search