separated out the details components

react/components/channelSelector.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class ChannelSelector extends React.Component {
+  render () {
+    return (
+      <div>
+        <h3>channel component</h3>
+      </div>
+    );
+  }
+}
+
+module.exports = ChannelSelector;

react/components/metadataInputs.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class MetadataInputs extends React.Component {
+  render () {
+    return (
+      <div>
+        <h3>details component</h3>
+      </div>
+    );
+  }
+}
+
+module.exports = MetadataInputs;

react/components/previewDropzone.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-class Preview extends React.Component {
+class PreviewDropzone extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
@@ -39,4 +39,4 @@ class Preview extends React.Component {
   }
 };
 
-module.exports = Preview;
+module.exports = PreviewDropzone;

react/components/publishDetails.jsx

@@ -1,63 +1,10 @@
 import React from 'react';
-import Preview from './preview.jsx';
+import PreviewDropzone from './previewDropzone.jsx';
-
+import TitleInput from './titleInput.jsx';
-class Title extends React.Component {
+import ChannelSelector from './channelSelector.jsx';
-  constructor (props) {
+import UrlInput from './urlInput.jsx';
-    super(props);
+import ThumbnailInput from './thumbnailInput.jsx';
-    this.handleInput = this.handleInput.bind(this);
+import MetadataInputs from './metadataInputs.jsx';
-  }
-  handleInput (e) {
-    e.preventDefault();
-    const name = e.target.name;
-    const value = e.target.value;
-    this.props.updateUploaderState(name, value);
-  }
-  render () {
-    return (
-      <input type="text" id="publish-title" className="input-text text--large input-text--full-width" name="title" placeholder="Give your post a title..." onChange={this.handleInput} value={this.props.title}/>
-    );
-  }
-}
-
-class Channel extends React.Component {
-  render () {
-    return (
-      <div>
-        <h3>channel component</h3>
-      </div>
-    );
-  }
-}
-
-class Url extends React.Component {
-  render () {
-    return (
-      <div>
-        <h3>url component</h3>
-      </div>
-    );
-  }
-}
-
-class Thumbnail extends React.Component {
-  render () {
-    return (
-      <div>
-        <h3>thumbnail component</h3>
-      </div>
-    );
-  }
-}
-
-class Details extends React.Component {
-  render () {
-    return (
-      <div>
-        <h3>details component</h3>
-      </div>
-    );
-  }
-}
 
 class PublishDetails extends React.Component {
   constructor (props) {
@@ -80,21 +27,29 @@ class PublishDetails extends React.Component {
     return (
       <div className="row row--no-bottom">
         <div className="column column--10">
-          <Title title={this.props.title} updateUploaderState={this.updateUploaderState}/>
+
+          <TitleInput title={this.props.title} updateUploaderState={this.updateUploaderState}/>
+
         </div>
         <div className="column column--5 column--sml-10" >
           <div className="row row--padded">
-            <Preview
+
+            <PreviewDropzone
               file={this.props.file}
             />
+
           </div>
         </div>
         <div className="column column--5 column--sml-10 align-content-top">
           <div id="publish-active-area" className="row row--padded">
-            <Channel />
+
-            <Url file={this.props.file}/>
+            <ChannelSelector />
-            { (this.props.file.type === 'video/mp4') && <Thumbnail thumbnail={this.props.thumbnail}/> }
+
-            <Details />
+            <UrlInput file={this.props.file}/>
+
+            { (this.props.file.type === 'video/mp4') && <ThumbnailInput thumbnail={this.props.thumbnail}/> }
+
+            <MetadataInputs />
 
             <div className="row row--padded row--wide">
               <div className="input-error" id="input-error-publish-submit" hidden="true">{this.props.inputError}</div>
@@ -108,6 +63,7 @@ class PublishDetails extends React.Component {
             <div className="row row--short align-content-center">
               <p className="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>
             </div>
+
           </div>
         </div>
       </div>

react/components/thumbnailInput.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class ThumbnailInput extends React.Component {
+  render () {
+    return (
+      <div>
+        <h3>thumbnail component</h3>
+      </div>
+    );
+  }
+}
+
+module.exports = ThumbnailInput;

react/components/titleInput.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+class TitleInput extends React.Component {
+  constructor (props) {
+    super(props);
+    this.handleInput = this.handleInput.bind(this);
+  }
+  handleInput (e) {
+    e.preventDefault();
+    const name = e.target.name;
+    const value = e.target.value;
+    this.props.updateUploaderState(name, value);
+  }
+  render () {
+    return (
+      <input type="text" id="publish-title" className="input-text text--large input-text--full-width" name="title" placeholder="Give your post a title..." onChange={this.handleInput} value={this.props.title}/>
+    );
+  }
+}
+
+module.exports = TitleInput;

react/components/urlInput.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class UrlInput extends React.Component {
+  render () {
+    return (
+      <div>
+        <h3>url component</h3>
+      </div>
+    );
+  }
+}
+
+module.exports = UrlInput;