129 lines
4.3 KiB
TypeScript
129 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { notFound } from 'next/navigation';
|
|
import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
|
|
import { prisma } from '../../../lib/prisma';
|
|
|
|
import { Metadata } from 'next';
|
|
|
|
interface Props {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { id } = await params;
|
|
|
|
const post = await prisma.blogPost.findFirst({
|
|
where: {
|
|
OR: [
|
|
{ id: id },
|
|
{ slug: id }
|
|
]
|
|
}
|
|
});
|
|
|
|
if (!post) return { title: 'Article non trouvé' };
|
|
|
|
return {
|
|
title: post.metaTitle || post.title,
|
|
description: post.metaDescription || post.excerpt,
|
|
keywords: post.tags,
|
|
openGraph: {
|
|
title: post.metaTitle || post.title,
|
|
description: post.metaDescription || post.excerpt,
|
|
images: [post.imageUrl],
|
|
type: 'article',
|
|
}
|
|
};
|
|
}
|
|
|
|
export default async function BlogPostPage({ params }: Props) {
|
|
const { id } = await params;
|
|
|
|
const post = await prisma.blogPost.findFirst({
|
|
where: {
|
|
OR: [
|
|
{ id: id },
|
|
{ slug: id }
|
|
]
|
|
}
|
|
});
|
|
|
|
if (!post) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<article className="bg-white min-h-screen">
|
|
{/* Hero Image */}
|
|
<div className="w-full h-64 md:h-96 relative">
|
|
<img
|
|
src={post.imageUrl}
|
|
alt={post.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
|
<div className="absolute bottom-0 left-0 w-full p-4 sm:p-8 max-w-4xl mx-auto">
|
|
<Link href="/blog" className="inline-flex items-center text-white/80 hover:text-white mb-4 text-sm font-medium transition-colors">
|
|
<ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-20 relative z-10">
|
|
<div className="bg-white rounded-xl shadow-xl p-6 md:p-10 border border-gray-100">
|
|
{/* Header */}
|
|
<header className="mb-8 border-b border-gray-100 pb-8">
|
|
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
|
|
<span className="flex items-center">
|
|
<User className="w-4 h-4 mr-1 text-brand-500" />
|
|
{post.author}
|
|
</span>
|
|
<span className="flex items-center">
|
|
<Calendar className="w-4 h-4 mr-1 text-brand-500" />
|
|
{new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
|
|
</span>
|
|
{post.tags.length > 0 ? (
|
|
post.tags.map(tag => (
|
|
<span key={tag} className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
|
|
{tag}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
|
|
Article
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h1 className="text-3xl md:text-4xl font-serif font-bold text-gray-900 leading-tight">
|
|
{post.title}
|
|
</h1>
|
|
</header>
|
|
|
|
{/* Content */}
|
|
<div className="prose prose-lg prose-orange max-w-none text-gray-600 break-words overflow-hidden">
|
|
<p className="lead text-xl text-gray-500 font-serif italic mb-6 border-b border-gray-100 pb-6">
|
|
{post.excerpt}
|
|
</p>
|
|
<div
|
|
className="mt-6"
|
|
dangerouslySetInnerHTML={{ __html: post.content }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer / Share */}
|
|
<div className="mt-12 pt-8 border-t border-gray-100 flex justify-between items-center">
|
|
<p className="text-sm text-gray-500 font-medium">Vous avez aimé cet article ?</p>
|
|
<div className="flex space-x-2">
|
|
<button className="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-brand-100 hover:text-brand-600 transition-colors">
|
|
<Share2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|