From 6d21042911b29b4a1d02f5a3c89bae417b4afe09 Mon Sep 17 00:00:00 2001
From: Rising Odegua <risingodegua@gmail.com>
Date: Mon, 3 May 2021 15:18:20 +0100
Subject: [PATCH] [Components][s]: Add components for creating blog page

---
 src/components/blog/Post.js     | 41 +++++++++++++++++++++++++++++++++
 src/components/blog/PostList.js | 41 +++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 src/components/blog/Post.js
 create mode 100644 src/components/blog/PostList.js

diff --git a/src/components/blog/Post.js b/src/components/blog/Post.js
new file mode 100644
index 00000000..e979d679
--- /dev/null
+++ b/src/components/blog/Post.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import parse from 'html-react-parser';
+
+/**
+ * Displays a blog post page
+ * @param {object} props 
+ * {
+ *  title: <The title of the blog post>
+ *  content: <The body of the blog post>
+ *  modified: <The utc date when the post was last modified.
+ *  featured_image: <Url/relative url to post cover image
+ * }
+ * @returns 
+ */
+const Post = ({ page }) => {
+  const { title, content, modified, featured_image } = page;
+
+  return (
+    <>
+      <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
+        {title}
+      </h1>
+      <p className="mb-6">Edited: {modified}</p>
+      <img src={featured_image} className="mb-6" alt="featured_img" />
+      <div>{parse(content)}</div>
+    </>
+  );
+};
+
+
+Post.propTypes = {
+  page: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    modified: PropTypes.string,
+    featured_image: PropTypes.string,
+  })
+}
+
+export default Post;
diff --git a/src/components/blog/PostList.js b/src/components/blog/PostList.js
new file mode 100644
index 00000000..d641d2ce
--- /dev/null
+++ b/src/components/blog/PostList.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import parse from 'html-react-parser';
+
+/**
+ * Displays a list of blog posts with the title and a short excerp from the content. 
+ * @param {object} props 
+ * {
+ *  posts: {
+ *    title: <The title of the blog post>
+ *    excerpt: <A short excerpt from the post content>
+ *   }
+ * } 
+ * @returns 
+ */
+const PostList = ({ posts }) => {
+  return (
+    <>
+      <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
+        {posts.length} posts found
+      </h1>
+      {posts.map((post, index) => (
+        <div key={index}>
+          <a
+            href={`/blog/${post.slug}`}
+            className="text-2xl font-semibold text-primary my-6 inline-block"
+          >
+            {parse(post.title)}
+          </a>
+          <p>{parse(post.excerpt)}</p>
+        </div>
+      ))}
+    </>
+  );
+};
+
+PostList.propTypes = {
+  posts: PropTypes.object.isRequired
+}
+
+export default PostList;