some blogging

src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
-    createBrowserRouter,
+    createBrowserRouter, NavLink,
     RouterProvider,
 } from "react-router-dom";
 import StatusPage from "./components/StatusPage";
@@ -10,10 +10,27 @@ import "./index.css";
 import 'bootstrap/dist/css/bootstrap.min.css';
 import UptimeCard from "./components/UptimeCard";
 import Footer from "./components/Footer";
+import {Nav, Navbar, NavbarBrand} from "react-bootstrap";
+import NWSLogo from "./static/images/NWS_Logo.png";
+import Blogs from "./components/Blogs";
 
 function Layout (props: {children: any}) {
     return (
         <div>
+            <Navbar sticky={"top"} style={{backgroundColor: "#eee", paddingLeft: 100, paddingRight: 100}}>
+                <NavbarBrand>
+                    <img src={NWSLogo} alt="nws-logo" style={{width: 120}}/>
+                </NavbarBrand>
+                <NavLink className={"nav-lnk"} to={"/"}>
+                    Home
+                </NavLink>
+                <NavLink className={"nav-lnk"} to={"/status"}>
+                    Status
+                </NavLink>
+                <NavLink className={"nav-lnk"} to={"/blogs"}>
+                    Blog
+                </NavLink>
+            </Navbar>
             {props.children}
             <Footer/>
         </div>
@@ -29,17 +46,24 @@ const router = createBrowserRouter([
             </Layout>
     },
     {
-        path: "blog",
+        path: "status",
         element:
             <Layout>
                 <StatusPage/>
             </Layout>
     },
+    {
+        path: "blog",
+        element:
+            <Layout>
+                <Blogs/>
+            </Layout>
+    },
     {
         path: "blogs",
         element:
             <Layout>
-                <StatusPage/>
+                <Blogs/>
             </Layout>
     },
     {