Single article page

src/components/blog-cards/BlogCard.css

@@ -19,7 +19,6 @@
   margin-bottom: 30px;
   color: #6c567b;
   font-size: 30px;
-  width: 90%;
 }
 
 .blogBody {
@@ -37,3 +36,7 @@
   height: 17em;
   align-self: center;
 }
+
+hr {
+
+}

src/components/blog-cards/BlogCard.jsx

@@ -1,30 +1,31 @@
 import React from 'react';
 import { Col, Row, Container, Image } from 'react-bootstrap';
-import { BrowserRouter as Router, Link } from 'react-router-dom';
+import { BrowserRouter as NavLink } from 'react-router-dom';
 import blogArticles from './blog.json';
 import './BlogCard.css';
 
 export default function BlogCard() {
   return blogArticles.map((blog) => {
     return (
-      <Container key={blog.id} className="blogContainer">
-        <Row>
-          <Col xs={6} md={6} lg={8}>
-            <h3 className="blogTitle">{blog.title}</h3>
-            <span className="blogBody">{blog.body.substring(0, 250)}...</span>
-            <Router>
-              <Link to={`/blog/${blog.id}`}>
+      <div>
+        <Container key={blog.id} className="blogContainer">
+          <Row>
+            <Col xs={6} md={6} lg={8}>
+              <h3 className="blogTitle">{blog.title}</h3>
+              <span className="blogBody">{blog.firstPart.substring(0, 250)}...</span>
+              <NavLink to={`/blog/${blog.id}`} key={blog.id}>
                 <button type="button" className="readMoreButton">
                   Read More
                 </button>
-              </Link>
-            </Router>
-          </Col>
-          <Col xs={4} md={4} lg={3} className="imageContainer">
-            <Image src={blog.imgUrl} className="roundImage" roundedCircle />
-          </Col>
-        </Row>
-      </Container>
+              </NavLink>
+            </Col>
+            <Col xs={4} md={4} lg={3} className="imageContainer">
+              <Image src={blog.imgUrl} className="roundImage" roundedCircle />
+            </Col>
+          </Row>
+        </Container>
+        <hr />
+      </div>
     );
   });
 }

src/components/blog-cards/__snapshots__/BlogCard.test.jsx.snap

@@ -2,6 +2,29 @@
 
 exports[`renders correctly 1`] = `
 Array [
+<<<<<<< HEAD
+  <div>
+    <div
+      className="blogContainer container"
+    >
+      <div
+        className="row"
+      >
+        <div
+          className="col-lg-8 col-md-6 col-6"
+        >
+          <h3
+            className="blogTitle"
+          >
+            My Intersectional Activism as A Black African Muslim Woman
+          </h3>
+          <span
+            className="blogBody"
+          >
+            My identities as being a Black Muslim woman who is also African come in one. I experience discrimination in many unique ways: my skin colour, my gender, my religion and being African. Often, the notion of have these identities tend to equate to me be
+            ...
+          </span>
+=======
   <div
     className="blogContainer container"
   >
@@ -26,12 +49,49 @@ Array [
           href="/blog/1"
           onClick={[Function]}
         >
+>>>>>>> dev
           <button
             className="readMoreButton"
             type="button"
           >
             Read More
           </button>
+<<<<<<< HEAD
+        </div>
+        <div
+          className="imageContainer col-lg-3 col-md-4 col-4"
+        >
+          <img
+            className="roundImage rounded-circle"
+            src="/images/blackMuslimAfrican.jpg"
+          />
+        </div>
+      </div>
+    </div>
+    <hr />
+  </div>,
+  <div>
+    <div
+      className="blogContainer container"
+    >
+      <div
+        className="row"
+      >
+        <div
+          className="col-lg-8 col-md-6 col-6"
+        >
+          <h3
+            className="blogTitle"
+          >
+            An Open Letter to My Abuser
+          </h3>
+          <span
+            className="blogBody"
+          >
+            It is hard to put into words all that you put me through. This letter is, I know, another vain attempt to master the chaos within me. But trying is always a better option than quitting, I suppose. Sometimes I wish you could go through the pain and st
+            ...
+          </span>
+=======
         </a>
       </div>
       <div
@@ -68,12 +128,49 @@ Array [
           href="/blog/2"
           onClick={[Function]}
         >
+>>>>>>> dev
           <button
             className="readMoreButton"
             type="button"
           >
             Read More
           </button>
+<<<<<<< HEAD
+        </div>
+        <div
+          className="imageContainer col-lg-3 col-md-4 col-4"
+        >
+          <img
+            className="roundImage rounded-circle"
+            src="/images/leon-biss.jpg"
+          />
+        </div>
+      </div>
+    </div>
+    <hr />
+  </div>,
+  <div>
+    <div
+      className="blogContainer container"
+    >
+      <div
+        className="row"
+      >
+        <div
+          className="col-lg-8 col-md-6 col-6"
+        >
+          <h3
+            className="blogTitle"
+          >
+            How My Love of Football Goes Against My Feminism
+          </h3>
+          <span
+            className="blogBody"
+          >
+            Marva, a 24-year-old woman from England, was reminded of how boys view girls who like to play football. She wrote about how, as a young girl, boys became physical with her whenever she outplayed them. Marva also recalls a recent experience at a park 
+            ...
+          </span>
+=======
         </a>
       </div>
       <div
@@ -110,12 +207,27 @@ Array [
           href="/blog/3"
           onClick={[Function]}
         >
+>>>>>>> dev
           <button
             className="readMoreButton"
             type="button"
           >
             Read More
           </button>
+<<<<<<< HEAD
+        </div>
+        <div
+          className="imageContainer col-lg-3 col-md-4 col-4"
+        >
+          <img
+            className="roundImage rounded-circle"
+            src="/images/footballGirl.jpg"
+          />
+        </div>
+      </div>
+    </div>
+    <hr />
+=======
         </a>
       </div>
       <div
@@ -127,6 +239,7 @@ Array [
         />
       </div>
     </div>
+>>>>>>> dev
   </div>,
 ]
 `;