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="/about" text="Our Mission" />
|
||||
<NavigationLink href="/team" text="Our Team" />
|
||||
<NavigationLink href="/changelog" text="Changelog" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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