import React from 'react'
import { inject, observer } from 'mobx-react'
import DraggableTab from './Tab/DraggableTab'

@inject('tabStore')
@observer
export default class DragPreview extends React.Component {
  render () {
    const { tabStore: { sources }, setDragPreview } = this.props
    const content = sources.map((tab) => (
      <DraggableTab key={tab.id} {...tab} faked />
    ))
    return (
      <div
        ref={setDragPreview}
        style={{
          position: 'fixed',
          top: 2048
        }}>
        {content}
      </div>
    )
  }
}

@@ -110,16 +110,58 @@
 ableTab'
+%0Aimport %7B blue %7D from 'material-ui/colors'
 %0A%0A@injec
@@ -493,16 +493,40 @@
 tyle=%7B%7B%0A
+          width: '64%25',%0A
         
@@ -560,28 +560,177 @@
     
-top: 2048%0A        %7D%7D
+background: blue%5B100%5D,%0A          textAlign: 'center',%0A          top: 2048%0A        %7D%7D%3E%0A        %3Ch3%3E%0A          %7Bsources.length%7D tab%7Bsources.length %3E 1 && 's'%7D%0A        %3C/h3
 %3E%0A  

Add title for DragPreview