92 lines
3.9 KiB
TypeScript
92 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { prisma } from '../../lib/prisma';
|
|
|
|
export const revalidate = 3600; // Revalidate every hour
|
|
|
|
export default async function BlogPage() {
|
|
let posts: any[] = [];
|
|
|
|
try {
|
|
posts = await prisma.blogPost.findMany({
|
|
where: {
|
|
status: 'PUBLISHED',
|
|
publishedAt: {
|
|
lte: new Date()
|
|
}
|
|
},
|
|
orderBy: { createdAt: 'desc' }
|
|
});
|
|
} catch (error) {
|
|
console.error("Database connection failed on blog page.");
|
|
posts = [];
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-3xl font-bold font-serif text-gray-900 sm:text-4xl">Nos Actualités</h1>
|
|
<p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
|
|
Conseils, dossiers et news de l'écosystème africain.
|
|
</p>
|
|
</div>
|
|
|
|
{posts.length === 0 ? (
|
|
<div className="text-center py-20 bg-gray-50 rounded-2xl border-2 border-dashed border-gray-200">
|
|
<p className="text-gray-500">Aucun article n'a encore été publié.</p>
|
|
<p className="text-sm text-gray-400 mt-2">Revenez bientôt pour de nouveaux contenus !</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-8 lg:grid-cols-3">
|
|
{posts.map(post => (
|
|
<Link key={post.id} href={`/actualites/${post.slug || post.id}`} className="group flex flex-col rounded-lg shadow-lg overflow-hidden bg-white hover:shadow-xl transition-shadow duration-300">
|
|
<div className="flex-shrink-0 relative overflow-hidden h-48">
|
|
<img
|
|
className="h-full w-full object-cover group-hover:scale-[1.05] transition-transform duration-500"
|
|
src={post.imageUrl}
|
|
alt={post.title}
|
|
style={{
|
|
objectPosition: post.coverPosition || '50% 50%',
|
|
transform: `scale(${post.coverZoom || 1})`,
|
|
transformOrigin: post.coverPosition || '50% 50%'
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
|
|
</div>
|
|
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-brand-600">Actualité</p>
|
|
<div className="block mt-2">
|
|
<p className="text-xl font-semibold text-gray-900 group-hover:text-brand-700 transition-colors line-clamp-2">{post.title}</p>
|
|
<p className="mt-3 text-base text-gray-500 line-clamp-3">{post.excerpt}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0">
|
|
<div className="h-10 w-10 rounded-full bg-brand-50 flex items-center justify-center text-brand-600 font-bold border border-brand-100 uppercase">
|
|
{post.author.charAt(0)}
|
|
</div>
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm font-medium text-gray-900">{post.author}</p>
|
|
<div className="flex space-x-1 text-sm text-gray-500">
|
|
<time>{new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' })}</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span className="text-brand-600 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<ArrowRight className="w-5 h-5" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|