75 lines
1.8 KiB
JavaScript
75 lines
1.8 KiB
JavaScript
import { notFound } from "next/navigation";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Nav from "../../components/Nav";
|
|
import { fetchPortfolioPostBySlug, fetchMedia } from "../../utils/useWordpress";
|
|
|
|
export default async function ProjectDetail({ params }) {
|
|
const { slug } = params;
|
|
|
|
if (!slug) {
|
|
notFound();
|
|
}
|
|
|
|
let post = null;
|
|
let featuredImageUrl = null;
|
|
|
|
try {
|
|
// Récupérer le post par son slug
|
|
post = await fetchPortfolioPostBySlug(slug, {
|
|
next: { revalidate: 3600 }, // Revalide toutes les heures
|
|
});
|
|
|
|
if (!post) {
|
|
notFound();
|
|
}
|
|
|
|
// Récupérer l'image featured si elle existe
|
|
if (post.featured_media) {
|
|
featuredImageUrl = await fetchMedia(post.featured_media, {
|
|
next: { revalidate: 3600 },
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération du projet:", error);
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<Nav />
|
|
<article className='max-w-4xl mx-auto px-8 py-8'>
|
|
<Link
|
|
href='/projects'
|
|
className='inline-block mb-6 text-blue-600 dark:text-blue-400 hover:underline'>
|
|
← Retour aux projets
|
|
</Link>
|
|
|
|
{featuredImageUrl && (
|
|
<div className='relative w-full h-96 mb-8 rounded-lg overflow-hidden'>
|
|
<Image
|
|
src={featuredImageUrl}
|
|
alt={post.title?.rendered || "Image du projet"}
|
|
fill
|
|
className='object-cover'
|
|
priority
|
|
sizes='(max-width: 768px) 100vw, 896px'
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<h1 className='text-4xl font-bold mb-6 text-neutral-800 dark:text-white'>
|
|
{post.title?.rendered || "Sans titre"}
|
|
</h1>
|
|
|
|
<div
|
|
className='prose prose-lg dark:prose-invert max-w-none text-neutral-700 dark:text-neutral-300'
|
|
dangerouslySetInnerHTML={{
|
|
__html: post.content?.rendered || "",
|
|
}}
|
|
/>
|
|
</article>
|
|
</main>
|
|
);
|
|
}
|