Add changelog page

src/components/Changelog.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { ChangelogEntry } from "~/components/ChangelogEntry";
+
+export interface LogEntry {
+  content: string;
+  data: {
+    title: string;
+    date: string;
+  };
+  isEmpty: boolean;
+  excerpt: string;
+}
+
+export const Changelog = () => {
+  const [entries, setEntries] = useState([] as LogEntry[]);
+  const [loaded, setLoaded] = useState(false);
+
+  const getEmployees = () => {
+    fetch("https://xnl.hri7566.info/api/changelog?n=5", {
+      next: {
+        revalidate: 60,
+      },
+    })
+      .then((res) => {
+        res
+          .json()
+          .then((j) => {
+            setEntries((j as any).logs as LogEntry[]);
+            setLoaded(true);
+          })
+          .catch((err) => console.error(err));
+      })
+      .catch((err) => console.error(err));
+  };
+
+  useEffect(() => {
+    getEmployees();
+  }, []);
+
+  return (
+    <>
+      {/* <EmployeeDescription name="Test" position="test" /> */}
+      {loaded ? (
+        entries.map((entry, index) => (
+          <ChangelogEntry
+            title={entry.data.title}
+            date={entry.data.date}
+            content={entry.content}
+            key={index}
+          />
+        ))
+      ) : (
+        <p>Loading...</p>
+      )}
+    </>
+  );
+};

src/components/ChangelogEntry.tsx

@@ -0,0 +1,18 @@
+export const ChangelogEntry = (
+  props: {
+    title: string;
+    date: string;
+    content: string;
+  } = {
+    title: "Title",
+    date: "Date",
+    content: "Content",
+  }
+) => {
+  return (
+    <div className="m-3 flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur">
+      <h3 className="text-2xl font-bold">{props.date}</h3>
+      <div className="text-lg">{props.content}</div>
+    </div>
+  );
+};

src/components/NavigationBar.tsx

@@ -6,6 +6,7 @@ export const NavigationBar = () => {
       <NavigationLink href="/" text="Home" />
       <NavigationLink href="/about" text="Our Mission" />
       <NavigationLink href="/team" text="Our Team" />
+      <NavigationLink href="/changelog" text="Changelog" />
     </div>
   );
 };

src/components/NavigationLink.tsx

@@ -4,7 +4,7 @@ export const NavigationLink = (props: { href: string; text: string }) => {
   return (
     <Link
       href={props.href}
-      className="m-2 flex max-w-xs cursor-pointer flex-col gap-4 rounded-xl p-4 text-white backdrop-blur-sm transition-all hover:bg-white/10 hover:shadow-lg hover:backdrop-blur"
+      className="m-2 flex max-w-xs cursor-pointer flex-col gap-4 rounded-xl p-4 text-white transition-all hover:bg-white/10 hover:shadow-lg hover:backdrop-blur"
     >
       <h3 className="text-lg">{props.text}</h3>
     </Link>

src/pages/changelog.tsx

@@ -0,0 +1,25 @@
+import { NavigationBar } from "../components/NavigationBar";
+import { PageContentBox } from "~/components/PageContentBox";
+import { CornerLogo } from "~/components/CornerLogo";
+import { Changelog as ChangelogComponent } from "~/components/Changelog";
+
+export default function Changelog() {
+  return (
+    <div className="bg-black/60">
+      <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
+        <CornerLogo />
+        <div className="absolute right-0 top-0">
+          <NavigationBar />
+        </div>
+        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
+            <PageContentBox title="Changelog">
+              <ChangelogComponent />
+            </PageContentBox>
+          </div>
+          <div className="flex flex-col items-center gap-2"></div>
+        </div>
+      </div>
+    </div>
+  );
+}