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 (
+
+
+
+ )
+ })}
+
+
+ {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,
+ })
+}