Files
kunstenkamp/apps/web/src/components/homepage/Footer.tsx

85 lines
2.3 KiB
TypeScript

"use client";
import { Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { authClient } from "@/lib/auth-client";
export default function Footer() {
const [isAdmin, setIsAdmin] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
authClient.getSession().then((session) => {
const user = session.data?.user as { role?: string } | undefined;
setIsAdmin(user?.role === "admin");
setIsLoading(false);
});
}, []);
return (
<footer className="relative z-40 flex h-[250px] flex-col items-center justify-center bg-[#d09035]">
<div className="text-center">
<h3 className="mb-4 flex items-center justify-center gap-2 font-['Intro',sans-serif] text-2xl text-white">
<img
src="/favicon.png"
alt=""
className="h-8 w-8 rounded bg-[#0B1C1F]"
/>
Kunstenkamp
</h3>
<p className="mb-6 font-['Intro',sans-serif] text-white/80">
Waar creativiteit tot leven komt
</p>
<div className="flex flex-col items-center justify-center gap-2 text-sm text-white/70 md:flex-row md:gap-8">
<a
href="/privacy"
className="link-hover transition-colors hover:text-white"
>
Privacy Beleid
</a>
<span className="hidden text-white/40 md:inline">|</span>
<a
href="/terms"
className="link-hover transition-colors hover:text-white"
>
Algemene Voorwaarden
</a>
<span className="hidden text-white/40 md:inline">|</span>
<a
href="/contact"
className="link-hover transition-colors hover:text-white"
>
Contact
</a>
{!isLoading && isAdmin && (
<>
<span className="hidden text-white/40 md:inline">|</span>
<Link
to="/admin"
className="link-hover transition-colors hover:text-white"
>
Admin
</Link>
</>
)}
</div>
<div className="mt-6 text-white/50 text-xs">
© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
</div>
<div className="text-white/50 text-xs transition-colors hover:text-white">
<a
href="https://zias.be"
target="_blank"
rel="noopener noreferrer"
className="link-hover"
>
Gemaakt met door zias.be
</a>
</div>
</div>
</footer>
);
}