import React from 'react';
import { Link } from 'react-router';

import Thumbnail from './Thumbnail';

class Result extends React.Component {
  render() {
    const style = {
      fontFamily: 'Bebas Neue Bold',
      fontSize: '2em',
      lineHeight: 'inherit',
      display: 'block',
      textDecoration: 'none',
      color: 'white',
      textTransform: 'uppercase',
      position: 'relative',
      height: 180,
      width: 320,
      margin: 20,
      float: 'left'
    };

    return (
      <Link to={'/' + this.props.result.id} style={style}>
        {this.props.result.title}
        <Thumbnail url={this.props.result.thumbnail} />
      </Link>
    );
  }
}

export default Result;

@@ -58,16 +58,45 @@
 uter';%0A%0A
+import Title from './Title';%0A
 import T
@@ -207,197 +207,52 @@
     
-fontFamily: 'Bebas Neue Bold',%0A      fontSize: '2em',%0A      lineHeight: 'inherit',%0A      display: 'block',%0A      textDecoration: 'none',%0A      color: 'white',%0A      textTransform: 'uppercas
+display: 'block',%0A      textDecoration: 'non
 e',%0A
@@ -330,17 +330,17 @@
 margin: 
-2
+1
 0,%0A     
@@ -442,16 +442,28 @@
         
+%3CTitle text=
 %7Bthis.pr
@@ -479,16 +479,19 @@
 t.title%7D
+ /%3E
 %0A       

move result title to separate component