some work on styling, looking at the index.tsx, maybe not worth to co…

…mponentize each release, already pretty short code-wise; will continue working on styling and thinking about storing methods (json seems ok so far, maybe just make an input method or something)

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import About from "@/app/About";
 import Catalog from "@/app/Catalog";
 import Landing from "@/app/Landing";
 import Layout from "@/app/Layout";
+import Releases from "@/app/Releases";
 
 const router = createBrowserRouter([
   {
@@ -52,6 +53,15 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    element: <Layout />,
+    children: [
+      {
+        element: <Releases />,
+        path: "/releases",
+      },
+    ],
+  },
 ]);
 
 export default function App() {

frontend/src/app/Releases/Releases.module.scss

@@ -14,6 +14,13 @@
   color: #383838;
 }
 
+.log_col {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+}
+
 .log {
   flex: 0 0 50%;
   max-width: 50%;

frontend/src/app/Releases/index.tsx

@@ -13,25 +13,28 @@ const Releases = () => {
           <h2>Berkeleytime Releases</h2>
           <h3>Keep up-to-date with our releases and bug fixes.</h3>
       </div>
-      {releases.map(rel => {
-        return (
-          <div className={styles.log}>
-              <h3 className={styles.heading}>{rel.date}</h3>
-              <h2 className={styles.heading}>🤩 What's New</h2>
-              <ul>
-                {rel.updates.map(item => {
-                  return <li>{item}</li>
-                })}
-              </ul>
-              <h2 className={styles.heading}>🐛 Bug Fixes</h2>
-              <ul>
-                {rel.fixes.map(item => {
-                  return <li>{item}</li>
-                })}
-              </ul>
-          </div>
-        );
-      })}
+      <div className={styles.log_col}>
+        {releases.map(rel => {
+          console.log(rel);
+          return (
+            <div className={styles.log}>
+                <h3>{rel.date}</h3>
+                <h2>🤩 What's New</h2>
+                <ul>
+                  {rel.updates.map(item => {
+                    return <li>{item}</li>
+                  })}
+                </ul>
+                <h2>🐛 Bug Fixes</h2>
+                <ul>
+                  {rel.fixes.map(item => {
+                    return <li>{item}</li>
+                  })}
+                </ul>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };