Add changelog page
This commit is contained in:
parent
988626edc1
commit
154df758e1
|
@ -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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
|
@ -6,6 +6,7 @@ export const NavigationBar = () => {
|
||||||
<NavigationLink href="/" text="Home" />
|
<NavigationLink href="/" text="Home" />
|
||||||
<NavigationLink href="/about" text="Our Mission" />
|
<NavigationLink href="/about" text="Our Mission" />
|
||||||
<NavigationLink href="/team" text="Our Team" />
|
<NavigationLink href="/team" text="Our Team" />
|
||||||
|
<NavigationLink href="/changelog" text="Changelog" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,7 +4,7 @@ export const NavigationLink = (props: { href: string; text: string }) => {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
href={props.href}
|
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>
|
<h3 className="text-lg">{props.text}</h3>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue