Mapping components

app/assets/stylesheets/pages/_home.scss

@@ -1,4 +1,8 @@
 // Specific CSS for your home-page
-// .idea-list {
-//   margin
-// }
+.idea-bucket {
+  margin-top: 30px;
+}
+
+.idea-bucket {
+  margin-top: 30px;
+}

app/javascript/bundles/HelloWorld/components/DropZone.jsx

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+const __container = styled.div`
+  padding: 4%;
+  border: 1px solid #ddd;
+  background-color: blue;
+  width: 100%;
+`;
+
+export default class DropZone extends React.Component {
+
+  render() {
+    return (
+      <__container>
+            This is the #dropzone
+      </__container>
+    );
+  }
+
+}

app/javascript/bundles/HelloWorld/components/GenerateButton.jsx

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';

app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -30,7 +30,7 @@ export default class HelloWorld extends React.Component {
         <hr />
         <form >
           <label htmlFor="name">
-            What if:
+            Rehearse your idea (how does it look to the world):
           </label>
           <input
             id="name"

app/javascript/bundles/HelloWorld/components/IdeaListItem.jsx

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';

app/javascript/bundles/HelloWorld/components/IdeaParameters.jsx

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';

app/javascript/bundles/HelloWorld/components/InputField.jsx

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';

app/views/pages/home.html.erb

@@ -1,19 +1,37 @@
 <div class="container">
 
-  <h1>Idea Machine</h1>
-  <p>Throw an idea inside</p>
-  <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %>
+<!-- we should have 5 components -->
 
+<!-- # 1 dropZone component -->
 
-  <%= simple_form_for Idea.new, url: ideas_create_path do |f| %>
-    <%= f.input :idea_content %>
-    <%= f.button :submit %>
-  <% end %>
+  <%= react_component("DropZone", props: @hello_world_props, prerender: false) %>
+
+<!-- # 2 inputField component -->
+
+  <div class="idea-bucket">
+      <%= simple_form_for Idea.new, url: ideas_create_path do |f| %>
+        <%= f.input :idea_content %>
+        <%= f.button :submit %>
+      <% end %>
+  </div>
+
+  <!-- # 3 ideaParameters component -->
+
+
+  <!-- # 4 ideaList component -->
+
+  <div class="idea-board">
+     <ol>
+      <% Idea.all.each do |idea| %>
+        <li><%= idea.idea_content %></li>
+      <% end %>
+    </ol>
+  </div>
+
+<!-- # 5 ideaListItem component -->
+
+
+<!-- # 6 generateButton component -->
 
-  <ol>
-    <% Idea.all.each do |idea| %>
-      <li><%= idea.idea_content %></li>
-    <% end %>
-  </ol>
 
 </div>