add files

src/components/About.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+function About({about,image = "https://via.placeholder.com/215 "}) {
+  return (
+    <div>
+        <aside> 
+            <img src = {image} alt = "blog logo"></img>
+        <p>
+            {about}
+        </p>
+        </aside>
+    </div>
+  )
+}
+
+export default About

src/components/App.js

@@ -1,15 +1,21 @@
+
 import React from "react";
 import blogData from "../data/blog";
+import Header from "./Header";
+import About from "./About";
+import logo from "../assets/logo";
+import ArticleList from "./ArticleList";
 
 console.log(blogData);
 
 function App() {
   return (
     <div className="App">
-      You're on your own from here! Follow the deliverables; test things out in
-      the browser as you write your code; and good luck!
+  <Header name = {blogData.name} />
+  <About image = {logo} about = {blogData.about} />
+  <ArticleList posts = {blogData.posts}/>
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/Article.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+function Article({title, date = "January 1, 1970", preview, minutes}) {
+    function TimeTaken ({minutes}) {
+        if (minutes < 30) {
+            let result = Math.ceil(minutes/5)
+            const coffeeCup = "☕"
+            let string = ""
+            for (let i = 0 ; i < result ; i++) {
+                string += coffeeCup 
+
+            }
+            const finalSentence = string + `${minutes} min read`
+            return finalSentence
+        } else {
+            let result2 = Math.ceil (minutes/10)
+            const icon = "🍱"
+            let string2 = ""
+            for (let i= 0 ; i < result2 ; i++) {
+                string2 += icon
+            }
+            const finalSentence2 = string2 + `${minutes} min read`
+            return finalSentence2
+        }
+
+
+    }
+  return (
+    <div>
+        <article>
+      <h3>{title}</h3>
+      <small> {date} </small>
+      <p>{preview} </p>
+      <TimeTaken minutes={minutes} />
+        </article>
+    </div>
+  )
+}
+
+export default Article

src/components/ArticleList.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Article from './Article'
+
+function ArticleList({posts}) {
+    const ArticleArray = posts.map ((post)=> {
+        return (
+            <Article title = {post.title} date = {post.date} preview = {post.preview}
+            minutes = {post.minutes} key = {post.id}/>
+        )
+    })
+  return (
+    <div>
+        <main>
+    {ArticleArray}
+        </main>
+    </div>
+  )
+}
+
+export default ArticleList

src/components/Header.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function Header(props) {
+  return (
+    <div>
+        <header>
+        <h1>{props.name}</h1>
+        </header>
+    </div>
+  )
+}
+
+export default Header