feat: blog page #99 (#105)

* added a blog page

* fixed #99

* update gitignore and package-lock.json

src/components/Resources/Blogs/Blog.css

@@ -0,0 +1,52 @@
+.blogs__container{
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    text-align: left;
+    height: 100%;
+    width: 400px;
+    border-radius: 10px;
+    background-color: #0d1117;
+    margin: 20px 1%;
+    padding: 15px 20px;
+}
+.blogs__container__title{
+    margin: 10px 0;
+    padding: 10px 0;
+}
+.blogs__container__title h1{
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+.blogs__container__title h6{
+    font-size: 0.9rem;
+    font-weight: 400;
+}
+.tags{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 10px 0;
+    padding: 10px 0;
+}
+.tag{
+    margin: 0 5px;
+    padding: 10 15px;
+    border-radius: 5px;
+    background-color: #1f6feb;
+    color: #fff;
+    font-size: 0.8rem;
+    font-weight: 400;
+}
+.AllBlogs{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+.blogImg{
+    margin-bottom: 9px;
+}

src/components/Resources/Blogs/Blogs.jsx

@@ -1,12 +1,29 @@
-import React from 'react';
-import {Section} from "../WriteUps/WriteUpsElements";
+import React from "react";
+import { Section } from "../WriteUps/WriteUpsElements";
+import BlogsElements from "./BlogsElements";
+import "./Blog.css";
+
+// probably recieved by a api call
+const blogs = {
+  title: "Lorem, ipsum",
+  author: "Dean A.",
+  date: "1st October 2022",
+  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex molestias nam, iure hic, sunt totam, eaque corporis inventore mollitia nemo saepe eligendi cumque numquam dolor placeat architecto pariatur fugiat accusantium!\nLorem ipsum dolor sit, amet consectetur adipisicing elit. Earum, cum perspiciatis pariatur facere soluta consectetur rerum aut ex quas deserunt inventore, dignissimos dicta blanditiis? Adipisci incidunt odio eaque nobis earum sit! Sequi, ducimus debitis. Commodi officiis vel quae sequi aspernatur iusto reprehenderit repellendus autem architecto!",
+  tags: ["coding", "gaming"]
+}
 
 const Blogs = () => {
-    return (
-        <Section>
-            <h1> Blogs </h1>
-        </Section>
-    );
+  return (
+    <Section>
+      <h1> All Blogs </h1>
+      <div className="AllBlogs">
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+      </div>
+    </Section>
+  );
 };
 
-export default Blogs;
+export default Blogs;

src/components/Resources/Blogs/BlogsElements.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import "./Blog.css";
+import image from "./img.jpg";
+// const image = require('./img.jpg');
+
+const BlogsElements = (props) => {
+  return (
+    <>
+      <div className="blogs__container">
+        <div className="blogs__container__title">
+          <img className="blogImg" src={image} alt="Blog Image" width="360px" height="180px" />
+          <h2>{props.title}</h2>
+          <h6>
+            {props.author} | {props.date}
+          </h6>
+        </div>
+        <div className="blogs__container__content">{props.content.slice(0, 200)}{props.content.length>200?"...":""}</div>
+        <div className="tags">
+          tags:
+          {props.tags.map((tag) => (
+            <div className="tag">{tag}</div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BlogsElements;