jeffrey/wwwfiberdirekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign posts listing and detail pages

Browse Source 
- posts/page.tsx: new layout matching design PDF - title+date above image, 3-col grid, no card borders
- posts/[slug]/page.tsx: editorial layout with hero image, fd-prose richtext, left-aligned CTA
This commit is contained in:
Jeffrey 2026-02-18 15:47:55 +01:00
parent dc00f0c060
commit ccdc739c22
1 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/app/(frontend)/posts/page.tsx
View File

@ -22,38 +22,51 @@ export default async function Page() {
title: true,
slug: true,
heroImage: true,
categories: true,
meta: true,
publishedAt: true,
populatedAuthors: true,
},
})
return (
<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-8 md:pb-12">
<h1 className="font-joey-heavy text-4xl md:text-5xl text-fd-navy">Nyheter</h1>
<p className="font-joey text-fd-body-lg text-fd-navy/60 mt-3">
{posts.totalDocs} {posts.totalDocs === 1 ? 'artikel' : 'artiklar'}
</p>
</div>
<div className="max-w-[1200px] mx-auto px-6 md:px-8 pb-16 md:pb-24">
<div className="max-w-[1200px] mx-auto px-6 md:px-8 pt-12 md:pt-16 pb-16 md:pb-24">
{/* Page heading */}
<h1 className="font-joey-heavy text-4xl md:text-5xl lg:text-[3.25rem] text-fd-navy mb-10 md:mb-14">
Nyheter!
</h1>
{/* Grid */}
{posts.docs.length === 0 ? (
<p className="font-joey text-fd-navy/50 py-16">Inga inlägg hittades.</p>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
{posts.docs.map((post) => {
const p = post as Post
const heroImage = p.heroImage as Media | undefined
const summary = p.meta?.description ?? null
return (
<a
key={p.id}
href={`/posts/${p.slug}`}
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="group flex flex-col"
>
<div className="relative aspect-[16/9] bg-fd-navy/5 overflow-hidden">
{/* Title above image */}
<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">
{p.title}
</h2>
{/* Date between title and image */}
{p.publishedAt && (
<p className="font-joey text-sm text-fd-navy/50 mb-4">
{formatDateTime(p.publishedAt)}
</p>
)}
{/* Image with rounded corners */}
<div className="relative aspect-[4/3] rounded-[20px] overflow-hidden bg-fd-navy/5">
{heroImage?.url ? (
<FDImage
media={heroImage}
@ -64,36 +77,24 @@ export default async function Page() {
fallbackAlt={p.title}
/>
) : (
<div className="w-full h-full flex items-center justify-center bg-fd-navy/5">
<div className="w-full h-full flex items-center justify-center">
<span className="font-joey text-fd-navy/30 text-sm">Ingen bild</span>
</div>
)}
</div>
<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>
)}
{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 && (
<div className="mt-12">
<div className="mt-16">
<Pagination page={posts.page} totalPages={posts.totalPages} />
</div>
)}
</div>
</div>
)