213 lines
9.2 KiB
TypeScript
213 lines
9.2 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { notFound } from 'next/navigation';
|
|
import { ArrowLeft, Share2, Play, Calendar, User, Building2, MapPin, ArrowRight } from 'lucide-react';
|
|
import { sanitizeHTML } from '../../../lib/sanitize';
|
|
import { prisma } from '../../../lib/prisma';
|
|
import { InterviewType } from '@prisma/client';
|
|
import LightboxImage from '@/components/LightboxImage';
|
|
|
|
import { Metadata } from 'next';
|
|
|
|
interface Props {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { id } = await params;
|
|
const now = new Date();
|
|
|
|
const interview = await prisma.interview.findFirst({
|
|
where: {
|
|
OR: [{ id }, { slug: id }],
|
|
publishedAt: { lte: now },
|
|
status: 'PUBLISHED'
|
|
}
|
|
});
|
|
|
|
const event = !interview ? await prisma.event.findFirst({
|
|
where: {
|
|
OR: [{ id }, { slug: id }],
|
|
publishedAt: { lte: now },
|
|
status: 'PUBLISHED'
|
|
}
|
|
}) : null;
|
|
|
|
const item = interview || event;
|
|
if (!item) return { title: 'Contenu non trouvé' };
|
|
|
|
const title = (item as any).metaTitle || item.title;
|
|
const description = (item as any).metaDescription || (item as any).excerpt || (item as any).description;
|
|
|
|
return {
|
|
title,
|
|
description,
|
|
keywords: (item as any).tags || [],
|
|
openGraph: {
|
|
title,
|
|
description,
|
|
images: [(item as any).thumbnailUrl],
|
|
}
|
|
};
|
|
}
|
|
|
|
export default async function AfroLifeDetailPage({ params }: Props) {
|
|
const { id } = await params;
|
|
const now = new Date();
|
|
|
|
// 1. Try to find an interview
|
|
const interview = await prisma.interview.findFirst({
|
|
where: {
|
|
OR: [{ id }, { slug: id }],
|
|
publishedAt: { lte: now },
|
|
status: 'PUBLISHED'
|
|
}
|
|
});
|
|
|
|
// 2. If not found, try to find an event
|
|
const event = !interview ? await prisma.event.findFirst({
|
|
where: {
|
|
OR: [{ id }, { slug: id }],
|
|
publishedAt: { lte: now },
|
|
status: 'PUBLISHED'
|
|
}
|
|
}) : null;
|
|
|
|
if (!interview && !event) {
|
|
notFound();
|
|
}
|
|
|
|
const item = interview || event;
|
|
const isEvent = !!event;
|
|
|
|
// Helper to get YouTube embed URL
|
|
const getEmbedUrl = (url: string) => {
|
|
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
|
const match = url.match(regExp);
|
|
return (match && match[2].length === 11) ? `https://www.youtube.com/embed/${match[2]}` : null;
|
|
};
|
|
|
|
const isVideo = !isEvent && (interview as any).type === InterviewType.VIDEO;
|
|
|
|
return (
|
|
<div className="bg-white min-h-screen">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<Link href="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 mb-8 transition-colors">
|
|
<ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
|
|
</Link>
|
|
|
|
{/* Header Info */}
|
|
<div className="text-center mb-10">
|
|
<div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-bold uppercase tracking-wider mb-4">
|
|
{isEvent ? 'Événement' : (isVideo ? 'Interview Vidéo' : 'Grand Entretien')}
|
|
</div>
|
|
<h1 className="text-3xl md:text-5xl font-serif font-bold text-gray-900 mb-6 leading-tight">
|
|
{item!.title}
|
|
</h1>
|
|
|
|
{/* Tags */}
|
|
{item && (item as any).tags && (item as any).tags.length > 0 && (
|
|
<div className="flex flex-wrap justify-center gap-2 mb-8">
|
|
{(item as any).tags.map((tag: string) => (
|
|
<span key={tag} className="px-3 py-1 bg-brand-50 text-brand-700 rounded-full text-xs font-semibold">
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap justify-center gap-6 text-sm text-gray-500">
|
|
{!isEvent ? (
|
|
<>
|
|
<div className="flex items-center">
|
|
<User className="w-4 h-4 mr-2 text-brand-500" />
|
|
<span className="font-medium text-gray-900">{(interview as any).guestName}</span>
|
|
<span className="mx-1 text-gray-400">|</span>
|
|
<span>{(interview as any).role}</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Building2 className="w-4 h-4 mr-2 text-brand-500" />
|
|
{(interview as any).companyName}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex items-center">
|
|
<MapPin className="w-4 h-4 mr-2 text-brand-500" />
|
|
<span className="font-medium text-gray-900">{(event as any).location}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center">
|
|
<Calendar className="w-4 h-4 mr-2 text-brand-500" />
|
|
{new Date(item!.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content Area */}
|
|
{isVideo ? (
|
|
<div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
|
|
{(interview as any).videoUrl ? (
|
|
<iframe
|
|
src={getEmbedUrl((interview as any).videoUrl) || ''}
|
|
title={item!.title}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
className="w-full h-full"
|
|
></iframe>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-gray-900 min-h-[300px]">
|
|
<p className="text-white">Vidéo non disponible</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="relative h-64 md:h-96 rounded-xl overflow-hidden shadow-lg mb-10">
|
|
<LightboxImage
|
|
src={item!.thumbnailUrl}
|
|
alt={item!.title}
|
|
position={(item as any).coverPosition || "50% 50%"}
|
|
zoom={(item as any).coverZoom || 1}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Description / Article Content / Event Content */}
|
|
<div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600">
|
|
{isEvent ? (
|
|
<div dangerouslySetInnerHTML={{ __html: sanitizeHTML((event as any).description) }} />
|
|
) : (
|
|
!isVideo && (interview as any).content ? (
|
|
<div dangerouslySetInnerHTML={{ __html: sanitizeHTML((interview as any).content) }} />
|
|
) : (
|
|
<p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
|
|
{(interview as any).excerpt}
|
|
</p>
|
|
)
|
|
)}
|
|
</div>
|
|
|
|
{/* Event Link Action */}
|
|
{isEvent && (event as any).link && (
|
|
<div className="mt-10 text-center">
|
|
<Link
|
|
href={(event as any).link}
|
|
target="_blank"
|
|
className="inline-flex items-center px-8 py-4 bg-brand-600 text-white rounded-full font-bold shadow-lg hover:bg-brand-700 hover:shadow-xl transition-all"
|
|
>
|
|
Participer à l'événement <ArrowRight className="w-5 h-5 ml-2" />
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer Actions */}
|
|
<div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
|
|
<button className="flex items-center px-6 py-3 rounded-full bg-brand-50 text-brand-700 font-medium hover:bg-brand-100 transition-colors">
|
|
<Share2 className="w-5 h-5 mr-2" />
|
|
Partager {isEvent ? "cet événement" : "cette interview"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|