diff --git a/src/app/(home)/pfarrei/magazin/archiv/page.tsx b/src/app/(home)/pfarrei/magazin/archiv/page.tsx new file mode 100644 index 0000000..dd08bc0 --- /dev/null +++ b/src/app/(home)/pfarrei/magazin/archiv/page.tsx @@ -0,0 +1,83 @@ +import { PageHeader } from '@/compositions/PageHeader/PageHeader' +import { Container } from '@/components/Container/Container' +import { Section } from '@/components/Section/Section' +import { NextPrevButtons } from '@/components/NextPrevButtons/NextPrevButtons' +import { fetchMagazines } from '@/fetch/magazine' +import { siteConfig } from '@/config/site' +import { Media } from '@/payload-types' +import Image from 'next/image' +import styles from './styles.module.scss' + +export const dynamic = 'force-dynamic' + +type Props = { + searchParams: Promise<{ page?: string }> +} + +export default async function MagazinArchivPage({ searchParams }: Props) { + const { page: pageParam } = await searchParams + const page = Math.max(1, parseInt(pageParam ?? '1', 10) || 1) + + const result = await fetchMagazines(page) + + return ( + <> + + +
+ +
+ {result.docs.map((magazine) => { + const cover = typeof magazine.cover === 'object' ? (magazine.cover as Media) : null + const pdfUrl = + typeof magazine.document === 'object' ? magazine.document.url ?? null : null + + if (!cover?.url || !pdfUrl) return null + + return ( + + {`${siteConfig.magazineName}`} + + ) + })} +
+ + {result.docs.length === 0 &&

Keine Ausgaben gefunden.

} +
+
+ + {(result.hasPrevPage || result.hasNextPage) && ( +
+ +
+ )} + + ) +} diff --git a/src/app/(home)/pfarrei/magazin/archiv/styles.module.scss b/src/app/(home)/pfarrei/magazin/archiv/styles.module.scss new file mode 100644 index 0000000..a03f739 --- /dev/null +++ b/src/app/(home)/pfarrei/magazin/archiv/styles.module.scss @@ -0,0 +1,23 @@ +@import 'template.scss'; + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 24px; +} + +.item { + display: block; + cursor: pointer; + + &:hover .cover { + transform: scale(1.03); + } +} + +.cover { + width: 100%; + height: auto; + border: 8px solid $light-grey; + transition: transform 0.2s ease; +} diff --git a/src/app/(home)/pfarrei/magazin/page.tsx b/src/app/(home)/pfarrei/magazin/page.tsx index 02c3bfb..475a56b 100644 --- a/src/app/(home)/pfarrei/magazin/page.tsx +++ b/src/app/(home)/pfarrei/magazin/page.tsx @@ -48,7 +48,8 @@ export default async function MagazinePage() { Bleiben Sie auf dem Laufenden! Hier finden Sie die aktuelle Ausgabe mit allen Berichten und Terminen aus der Gemeinde.

- + + diff --git a/src/fetch/magazine.ts b/src/fetch/magazine.ts index ba82d66..b206b79 100644 --- a/src/fetch/magazine.ts +++ b/src/fetch/magazine.ts @@ -1,15 +1,9 @@ import { getPayload } from 'payload' import config from '@/payload.config' import { Magazine } from '@/payload-types' +import { PaginatedDocs } from 'payload' -/** - * Asynchronously fetches the last magazine entry. - * - * @returns {Promise} The last magazine entry if successful, or undefined. - */ -export const fetchLastMagazine = async (): Promise< - Magazine | undefined -> => { +export const fetchLastMagazine = async (): Promise => { const payload = await getPayload({ config }) const result = await payload.find({ collection: 'magazine', @@ -18,3 +12,13 @@ export const fetchLastMagazine = async (): Promise< }) return result.docs[0] } + +export const fetchMagazines = async (page = 1, limit = 12): Promise> => { + const payload = await getPayload({ config }) + return payload.find({ + collection: 'magazine', + sort: '-date', + limit, + page, + }) +}