fix: remove missing PageClient import from posts pagination page

This commit is contained in:
Jeffrey 2026-02-18 16:11:07 +01:00
parent ed4062aef0
commit 0b7303e97f

View File

@ -6,106 +6,70 @@ import type { Post, Media } from '@/payload-types'
import { FDImage } from '@/components/FDImage' import { FDImage } from '@/components/FDImage'
import { formatDateTime } from '@/utilities/formatDateTime' import { formatDateTime } from '@/utilities/formatDateTime'
import { Pagination } from '@/components/Pagination' import { Pagination } from '@/components/Pagination'
import PageClient from './page.client'
export const dynamic = 'force-dynamic' export const dynamic = 'force-dynamic'
export default async function Page() { export default async function Page({ params }: { params: Promise<{ pageNumber: string }> }) {
const { pageNumber } = await params
const payload = await getPayload({ config: configPromise }) const payload = await getPayload({ config: configPromise })
const posts = await payload.find({ const posts = await payload.find({
collection: 'posts', collection: 'posts',
depth: 1, depth: 1,
limit: 12, limit: 12,
page: parseInt(pageNumber, 10),
overrideAccess: false, overrideAccess: false,
select: { select: {
title: true, title: true,
slug: true, slug: true,
heroImage: true, heroImage: true,
categories: true,
meta: true, meta: true,
publishedAt: true, publishedAt: true,
populatedAuthors: true,
}, },
}) })
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<PageClient /> <div className="max-w-[1200px] mx-auto px-6 md:px-8 pt-12 md:pt-16 pb-16 md:pb-24">
<h1 className="font-joey-heavy text-4xl md:text-5xl lg:text-[3.25rem] text-fd-navy mb-10 md:mb-14">
{/* ── Page header ── */} Nyheter!
<div className="max-w-[1200px] mx-auto px-6 md:px-8 pt-12 md:pt-16 pb-8 md:pb-12">
<h1 className="font-joey-heavy text-4xl md:text-5xl text-fd-navy">
Nyheter
</h1> </h1>
<p className="font-joey text-fd-body-lg text-fd-navy/60 mt-3"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
{posts.totalDocs} {posts.totalDocs === 1 ? 'artikel' : 'artiklar'} {posts.docs.map((post) => {
</p> const p = post as Post
</div> const heroImage = p.heroImage as Media | undefined
return (
{/* ── Card grid ── */} <a key={p.id} href={`/posts/${p.slug}`} className="group flex flex-col">
<div className="max-w-[1200px] mx-auto px-6 md:px-8 pb-16 md:pb-24"> <h2 className="font-joey-bold text-fd-navy text-xl md:text-[1.375rem] leading-snug mb-2 group-hover:text-fd-navy/70 transition-colors line-clamp-2">
{posts.docs.length === 0 ? ( {p.title}
<p className="font-joey text-fd-navy/50 py-16">Inga inlägg hittades.</p> </h2>
) : ( {p.publishedAt && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"> <p className="font-joey text-sm text-fd-navy/50 mb-4">
{posts.docs.map((post) => { {formatDateTime(p.publishedAt)}
const p = post as Post </p>
const heroImage = p.heroImage as Media | undefined )}
const summary = p.meta?.description ?? null <div className="relative aspect-[4/3] rounded-[20px] overflow-hidden bg-fd-navy/5">
{heroImage?.url ? (
return ( <FDImage
<a media={heroImage}
key={p.id} size="medium"
href={`/posts/${p.slug}`} fill
className="group flex flex-col bg-white rounded-[20px] border border-fd-navy/10 overflow-hidden hover:border-fd-navy/20 hover:shadow-lg transition-all duration-300" className="object-cover group-hover:scale-[1.03] transition-transform duration-500"
> sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
{/* Image */} fallbackAlt={p.title}
<div className="relative aspect-[16/9] bg-fd-navy/5 overflow-hidden"> />
{heroImage?.url ? ( ) : (
<FDImage <div className="w-full h-full flex items-center justify-center">
media={heroImage} <span className="font-joey text-fd-navy/30 text-sm">Ingen bild</span>
size="medium" </div>
fill )}
className="object-cover group-hover:scale-[1.03] transition-transform duration-500" </div>
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" </a>
fallbackAlt={p.title} )
/> })}
) : ( </div>
<div className="w-full h-full flex items-center justify-center bg-fd-navy/5">
<span className="font-joey text-fd-navy/30 text-sm">Ingen bild</span>
</div>
)}
</div>
{/* Content */}
<div className="flex flex-col flex-1 p-5 md:p-6">
<h2 className="font-joey-bold text-fd-navy text-lg md:text-xl leading-snug mb-2 group-hover:text-fd-navy/80 transition-colors">
{p.title}
</h2>
{summary && (
<p className="font-joey text-sm text-fd-navy/60 leading-relaxed line-clamp-3 mb-4">
{summary}
</p>
)}
{/* Date */}
{p.publishedAt && (
<p className="font-joey text-xs text-fd-navy/40 mt-auto pt-3 border-t border-fd-navy/8">
{formatDateTime(p.publishedAt)}
</p>
)}
</div>
</a>
)
})}
</div>
)}
{/* Pagination */}
{posts.totalPages > 1 && posts.page && ( {posts.totalPages > 1 && posts.page && (
<div className="mt-12"> <div className="mt-16">
<Pagination page={posts.page} totalPages={posts.totalPages} /> <Pagination page={posts.page} totalPages={posts.totalPages} />
</div> </div>
)} )}
@ -117,6 +81,5 @@ export default async function Page() {
export function generateMetadata(): Metadata { export function generateMetadata(): Metadata {
return { return {
title: 'Nyheter | Fiber Direkt', title: 'Nyheter | Fiber Direkt',
description: 'Senaste nytt från Fiber Direkt',
} }
} }