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>
|
||
)}
|
||
</>
|
||
);
|
||
}
|