From a1f4ec8608b1a3cbe04f2605c777ad2b5130da0b Mon Sep 17 00:00:00 2001
From: Christopher Talib <christopher.talib@dcso.de>
Date: Fri, 19 Jul 2019 15:25:01 +0200
Subject: [PATCH] done 3

---
 react/3/NOTES.md                         |  7 +++++++
 react/3/components/src/ApprovalCard.js   | 16 +++++++++++++++
 react/3/components/src/CommentDetails.js | 21 ++++++++++++++++++++
 react/3/components/src/index.js          | 25 ++++++++++++------------
 4 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 react/3/NOTES.md
 create mode 100644 react/3/components/src/ApprovalCard.js
 create mode 100644 react/3/components/src/CommentDetails.js

diff --git a/react/3/NOTES.md b/react/3/NOTES.md
new file mode 100644
index 0000000..38bef8d
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/react/3/components/src/ApprovalCard.js b/react/3/components/src/ApprovalCard.js
new file mode 100644
index 0000000..10ad94f
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/react/3/components/src/CommentDetails.js b/react/3/components/src/CommentDetails.js
new file mode 100644
index 0000000..7c545fe
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/react/3/components/src/index.js b/react/3/components/src/index.js
index c1c6033..3549c46 100644
--- a/react/3/components/src/index.js
+++ b/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'));