Add new files

src/components/TilingItem.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+interface Props {
+  titlebarName: str;
+  children: React.ReactNode;
+}
+
+export default function Navbar({ children, titlebarName }: Props) {
+  return (
+    <>
+      <div className="standardTilingBox">
+        {titlebarName ? (
+          <div className="standardTilingTitlebar">
+            <p>{titlebarName}</p>
+          </div>
+        ) : null}
+        {children}
+      </div>
+    </>
+  );
+}

src/pages/Blog.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import BlogEntryCard from "./../components/BlogEntryCard.tsx";
+
+export default function Home() {
+  // A mock of what the data from the getBlogEntries JSON return would look like
+  const blogEntries = [
+    {
+      blogImage:
+        "https://git.cspark.dev/avatars/1c230bfe7494b1a62932d94ed8558dc61189437b1b6e0cecdb0c45c3d899bea4?size=512",
+      blogTitle: "Test Blog Entry 1",
+      blogDatePosted: "12/04/2024 4PM", // In reality this would probably be an actual correct format/standardised timestamp
+      blogDescription: "This is a first blog entry test", // If no description, we'd want to get a small snippet of the intro of the blog
+    },
+    {
+      blogImage:
+        "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
+      blogTitle: "Test Blog Entry 2",
+      blogDatePosted: "8/04/2024 6PM", // In reality this would probably be an actual correct format/standardised timestamp
+      blogDescription: "This is a test blog entry number 2", // If no description, we'd want to get a small snippet of the intro of the blog
+    },
+  ];
+
+  return (
+    <>
+      <div className="blogEntryGrid">
+        {blogEntries.map((item, index) => (
+          <BlogEntryCard
+            key={index}
+            blogImage={item["blogImage"]}
+            blogTitle={item["blogTitle"]}
+            blogDatePosted={item["blogDatePosted"]}
+            blogDescription={item["blogDescription"]}
+          ></BlogEntryCard>
+        ))}
+      </div>
+    </>
+  );
+}

src/pages/BlogEditor.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Navigate } from "react-router-dom";
+import { authTokenStorageHandlerInit } from "../components/storageHandler.ts";
+
+import TilingItem from "../components/TilingItem.tsx";
+
+export default function Home() {
+  const authTokenStorageHandler = authTokenStorageHandlerInit();
+
+  if (!authTokenStorageHandler.authTokenValue) {
+    return <Navigate to="/home"></Navigate>;
+  }
+
+  return (
+    <>
+      <div className="standardHorizontalTilingGrid">
+        <TilingItem titlebarName="testing"></TilingItem>
+        <TilingItem></TilingItem>
+      </div>
+    </>
+  );
+}

src/pages/Settings.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Navigate } from "react-router-dom";
+import { authTokenStorageHandlerInit } from "../components/storageHandler.ts";
+
+import TilingItem from "../components/TilingItem.tsx";
+
+export default function Home() {
+  const authTokenStorageHandler = authTokenStorageHandlerInit();
+
+  if (!authTokenStorageHandler.authTokenValue) {
+    return <Navigate to="/home"></Navigate>;
+  }
+
+  return (
+    <>
+      <div className="standardHorizontalTilingGrid">
+        <TilingItem></TilingItem>
+      </div>
+    </>
+  );
+}