Create Static Site With Built Components

src/components/About.js

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

src/components/App.js

@@ -1,13 +1,15 @@
 import React from "react";
 import blogData from "../data/blog";
-
-console.log(blogData);
+import Header from "./Header.js"
+import About from "./About.js"
+import ArticleList from "./ArticleList";
 
 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={blogData.image} about={blogData.about} />
+      <ArticleList posts={blogData.posts} />
     </div>
   );
 }

src/components/Article.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function Article ({title, date = "January 1, 1970", preview}) {
+  return (
+    <article>
+      <h3>{title}</h3>
+      <small>{date}</small>
+      <p>{preview}</p>
+    </article>
+  )
+}
+
+export default Article

src/components/ArticleList.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Article  from "./Article";
+
+function ArticleList ({posts}) {
+  console.log(posts)
+  const articles = posts.map((post) => {
+    return (
+      <Article
+        key={post.id}
+        title={post.title}
+        preview={post.preview}
+        date={post.date}
+      />
+    )
+  })
+
+  return (
+    <main>{articles}</main>
+  )
+}
+
+export default ArticleList

src/components/Header.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Header ({name}) {
+  return (
+    <header>
+      <h1>{name}</h1>
+    </header>
+  )
+}
+
+export default Header