Dagemark-Webapp/components/layout/Header.tsx

73 lines
1.6 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import Hyperlink from "@/components/ui/NavLink";
import { getServices } from "@/lib/api/helpers/services";
import { Service } from "@/lib/api/types";
const defaultServices: Service[] = [
{
id: null,
title: "Git Repos",
description: null,
priority: 1,
link: "dagemark.se/git",
},
{
id: null,
title: "Nextcloud Drive",
description: null,
priority: 3,
link: "dagemark.se/drive",
},
{
id: null,
title: "Game Servers",
description: null,
priority: 4,
link: "gserver.dagemark.se",
},
{
id: null,
title: "Immich Album",
description: null,
priority: 5,
link: "album.dagemark.se",
},
{
id: null,
title: "Jellyfin Streaming",
description: null,
priority: 2,
link: "streaming.dagemark.se",
},
];
export default function Header() {
const [services, setServices] = useState<Service[]>(defaultServices);
useEffect(() => {
getServices()
.then((services) => {
if (services.length > 0) {
setServices(services);
}
})
.catch(() => {
// Keep default services if the backend is not reached :C
});
}, []);
return (
<header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
<nav className="flex items-center justify-around w-full h-full px-6 py-4">
{services.map((service) => (
<Hyperlink
key={service.priority}
name={service.title}
link={service.link}
/>
))}
</nav>
</header>
);
}