done 3

react/3/NOTES.md

@@ -0,0 +1,7 @@
+# Notes
+
+## Props
+Props stands for properties.
+A system for passing data from a parent component to a child component. The goal is to customize or configure the child component.
+
+Props are objects so the fields have to be called as methods: `props.author` for instance.

react/3/components/src/ApprovalCard.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+
+const ApprovalCard = (props) => {
+    return (
+        <div className="ui card">
+            <div className="content">{props.children}</div>
+            <div className="ui two buttons">
+                <div className="ui basic green button">Approve</div>
+                <div className="ui basic red button">Decline</div>
+            </div>
+        </div>
+    )
+}
+
+export default ApprovalCard

react/3/components/src/CommentDetails.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const CommentDetail = (props) => {
+    console.log(props)
+    return (
+        <div className="comment">
+            <a href="/" className="avatar">
+                <img src={props.avatar} alt="avatar" />
+            </a>
+            <div className="content">
+                <a href="/" className="author">{props.author}</a>
+                <div className="metadata">
+                    <span className="date">{props.timeAgo}</span>
+                </div>
+                <div className="text">{props.content}</div>
+            </div>
+        </div>
+    )
+}
+
+export default CommentDetail

react/3/components/src/index.js

@@ -1,24 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import CommentDetail from './CommentDetails';
 import faker from 'faker';
+import ApprovalCard from './ApprovalCard';
 
 const App = () => {
     return (
         <div className="ui container comments">
-            <div className="comment">
-                <a href="/" className="avatar">
-                    <img src={faker.image.avatar()} alt="avatar" />
-                </a>
-                <div className="content">
-                    <a href="/" className="author">Same</a>
-                    <div className="metadata">
-                        <span className="date">Today at 6:00PM</span>
-                    </div>
-                    <div className="text">Nice blog post!</div>
-                </div>
-            </div>
+            <ApprovalCard >
+                <CommentDetail author="Sam" timeAgo="Today at 5pm" avatar={faker.image.avatar()} content={faker.hacker.phrase()} />
+            </ ApprovalCard>
+            <ApprovalCard >
+                <CommentDetail author="Alex" timeAgo="Today at 6pm" avatar={faker.image.avatar()} content={faker.hacker.phrase()} />
+            </ ApprovalCard>
+            <ApprovalCard >
+                <CommentDetail author="Bob" timeAgo="Today at 7pm" avatar={faker.image.avatar()} content={faker.hacker.phrase()} />
+            </ ApprovalCard>
         </div>
-        ) 
+    )
 };
 
 ReactDOM.render(<App />, document.querySelector('#root'));