79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { PageHeader } from "@/components/PageHeader";
|
|
import { Section } from "@/components/Section";
|
|
import { Reveal } from "@/components/Reveal";
|
|
import { EventTeaserCard } from "@/components/EventTeaserCard";
|
|
import { ArrowLink } from "@/components/ArrowLink";
|
|
import { getAllEvents } from "@/lib/payload/content";
|
|
import { buildMetadata } from "@/lib/seo/metadata";
|
|
import { getSiteUrl } from "@/lib/seo/config";
|
|
import { JsonLd, webPageJsonLd } from "@/lib/seo/jsonld";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
const DESCRIPTION = "Aktuelle Termine und Veranstaltungen von Anouma.";
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
return buildMetadata({ title: "Termine", description: DESCRIPTION, path: "/termine" });
|
|
}
|
|
|
|
export default async function TerminePage() {
|
|
const events = await getAllEvents();
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
const upcoming = events
|
|
.filter((e) => new Date(e.date) >= today)
|
|
.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
|
const past = events.filter((e) => new Date(e.date) < today);
|
|
const siteUrl = await getSiteUrl();
|
|
|
|
return (
|
|
<>
|
|
<JsonLd data={webPageJsonLd({ name: "Termine", description: DESCRIPTION, url: `${siteUrl}/termine` })} />
|
|
<PageHeader
|
|
eyebrow="Termine"
|
|
title="Aktuelle Termine"
|
|
lead="Ein Überblick über anstehende Kreise, Begleitungen und Veranstaltungen."
|
|
crumbs={[{ title: "Termine" }]}
|
|
blobTone="mauve"
|
|
blobPosition="top-left"
|
|
/>
|
|
|
|
<Section tone="plain">
|
|
{upcoming.length === 0 ? (
|
|
<div className="rounded-3xl bg-anouma-cream-light p-8 text-center sm:p-10">
|
|
<p className="font-serif text-xl font-medium text-anouma-plum">Aktuell sind keine Termine geplant</p>
|
|
<p className="mt-2 text-base leading-relaxed text-anouma-plum/90">
|
|
Schau gerne bald wieder vorbei, oder melde dich direkt - ich freue mich von dir zu hören.
|
|
</p>
|
|
<div className="mt-5 flex justify-center">
|
|
<ArrowLink href="/kontakt">Zur Kontaktseite</ArrowLink>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{upcoming.map((event, i) => (
|
|
<Reveal key={event.slug} delay={Math.min(i * 0.06, 0.3)}>
|
|
<EventTeaserCard event={event} />
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Section>
|
|
|
|
{past.length > 0 && (
|
|
<Section tone="warm">
|
|
<h2 className="font-serif text-2xl font-medium text-anouma-plum">Vergangene Termine</h2>
|
|
<div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{past.map((event) => (
|
|
<div key={event.slug} className="opacity-70">
|
|
<EventTeaserCard event={event} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)}
|
|
</>
|
|
);
|
|
}
|