Finished blogs

src/pages/Blog.tsx

@@ -1,11 +1,14 @@
 import React, {useState} from 'react';
 import './Home.css';
+import Blogs from "../components/blogs/Blogs";
 
 function Blog() {
 
     return (
-        <div className="Blog">
+        <div className="Blog" style={{padding: 20}}>
             <h1>Blog</h1>
+            <a href={"/"}>Return Home</a>
+            <Blogs/>
         </div>
     );
 }

src/pages/Home.css

@@ -1,3 +1,7 @@
+img[alt=cavcash-newsroom] {
+  width: 49.5%
+}
+
 .App {
   text-align: center;
   background-color: black;

src/pages/SingleBlog.tsx

@@ -0,0 +1,62 @@
+import React, {useEffect, useState} from 'react';
+import './Home.css';
+import ReactMarkdown from 'react-markdown'
+import {AllBlogs} from "../static/data/Blogs";
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
+import {a11yDark as theme} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+function SingleBlog() {
+
+    const [blog, setBlog] = useState('');
+    const [blogId, setBlogId] = useState(0);
+
+    useEffect(()=> {
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        setBlogId(parseInt(urlParams.get('id') || ''));
+    }, [])
+
+    fetch(AllBlogs[blogId].mdfile)
+        .then(response => {
+            return response.text()
+        })
+        .then(text => {
+            setBlog(text)
+        })
+
+    return (
+        <div className="Blog" style={{padding: 20}}>
+            <h1>{AllBlogs[blogId].title}</h1>
+            <p>{AllBlogs[blogId].date.toLocaleDateString()}</p>
+            <p><a href={"/"}>Return Home</a> | <a href={"/blogs"}>All Blogs</a></p>
+            <div style={{width: "100%", display: 'flex', justifyContent: 'center'}}>
+                <div style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
+                    <ReactMarkdown
+                        components={{
+                            code({node, inline, className, children, ...props}) {
+                                const match = /language-(\w+)/.exec(className || '')
+                                return !inline && match ? (
+                                    <SyntaxHighlighter
+                                        children={String(children).replace(/\n$/, '')}
+                                        style={theme}
+                                        language={match[1]}
+                                        PreTag="div"
+                                        {...props}
+                                    />
+                                ) : (
+                                    <code className={className} {...props}>
+                                        {children}
+                                    </code>
+                                )
+                            }
+                        }}
+                    >
+                        {blog}
+                    </ReactMarkdown>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default SingleBlog;