feat: initialize Prisma schema and scaffold core application modules including auth, blogs, events, and business directories
Some checks failed
Build and Push App / build (push) Failing after 47s

This commit is contained in:
2026-04-22 22:59:12 +02:00
parent b01b2f6476
commit 2e7cb65a29
32 changed files with 1392 additions and 310 deletions

View File

@@ -1,25 +1,73 @@
import React from 'react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { ArrowLeft, Share2, Play, Calendar, User, Building2 } from 'lucide-react';
import { ArrowLeft, Share2, Play, Calendar, User, Building2, MapPin, ArrowRight } from 'lucide-react';
import { prisma } from '../../../lib/prisma';
import { InterviewType } from '@prisma/client';
import { Metadata } from 'next';
interface Props {
params: Promise<{ id: string }>;
}
export default async function InterviewDetailPage({ params }: Props) {
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { id } = await params;
const interview = await prisma.interview.findUnique({
where: { id }
const interview = await prisma.interview.findFirst({
where: {
OR: [{ id }, { slug: id }]
}
});
if (!interview) {
const event = !interview ? await prisma.event.findFirst({
where: {
OR: [{ id }, { slug: id }]
}
}) : 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;
// 1. Try to find an interview
const interview = await prisma.interview.findFirst({
where: {
OR: [{ id }, { slug: id }]
}
});
// 2. If not found, try to find an event
const event = !interview ? await prisma.event.findFirst({
where: {
OR: [{ id }, { slug: id }]
}
}) : 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=)([^#&?]*).*/;
@@ -27,7 +75,7 @@ export default async function InterviewDetailPage({ params }: Props) {
return (match && match[2].length === 11) ? `https://www.youtube.com/embed/${match[2]}` : null;
};
const isVideo = interview.type === InterviewType.VIDEO;
const isVideo = !isEvent && (interview as any).type === InterviewType.VIDEO;
return (
<div className="bg-white min-h-screen">
@@ -39,26 +87,46 @@ export default async function InterviewDetailPage({ params }: Props) {
{/* 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">
{isVideo ? 'Interview Vidéo' : 'Grand Entretien'}
{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">
{interview.title}
{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">
<div className="flex items-center">
<User className="w-4 h-4 mr-2 text-brand-500" />
<span className="font-medium text-gray-900">{interview.guestName}</span>
<span className="mx-1 text-gray-400">|</span>
<span>{interview.role}</span>
</div>
<div className="flex items-center">
<Building2 className="w-4 h-4 mr-2 text-brand-500" />
{interview.companyName}
</div>
{!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(interview.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
{new Date(item!.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
</div>
</div>
</div>
@@ -66,10 +134,10 @@ export default async function InterviewDetailPage({ params }: Props) {
{/* Main Content Area */}
{isVideo ? (
<div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
{interview.videoUrl ? (
{(interview as any).videoUrl ? (
<iframe
src={getEmbedUrl(interview.videoUrl) || ''}
title={interview.title}
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"
@@ -82,27 +150,44 @@ export default async function InterviewDetailPage({ params }: Props) {
</div>
) : (
<div className="relative h-64 md:h-96 rounded-xl overflow-hidden shadow-lg mb-10">
<img src={interview.thumbnailUrl} alt={interview.title} className="w-full h-full object-cover" />
<img src={item!.thumbnailUrl} alt={item!.title} className="w-full h-full object-cover" />
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
</div>
)}
{/* Description / Article Content */}
{/* Description / Article Content / Event Content */}
<div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600 break-words overflow-hidden">
{!isVideo && interview.content ? (
<div dangerouslySetInnerHTML={{ __html: interview.content }} />
{isEvent ? (
<div dangerouslySetInnerHTML={{ __html: (event as any).description }} />
) : (
<p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
{interview.excerpt}
</p>
!isVideo && (interview as any).content ? (
<div dangerouslySetInnerHTML={{ __html: (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 cette interview
Partager {isEvent ? "cet événement" : "cette interview"}
</button>
</div>
</div>

View File

@@ -1,8 +1,9 @@
import React from 'react';
import Link from 'next/link';
import { Play, FileText, Clock, Mic } from 'lucide-react';
import { Play, FileText, Clock, Mic, Calendar } from 'lucide-react';
import { prisma } from '../../lib/prisma';
import { InterviewType } from '@prisma/client';
import EventTimeline from '../../components/EventTimeline';
export const revalidate = 3600;
@@ -12,23 +13,56 @@ interface Props {
export default async function AfroLifePage({ searchParams }: Props) {
const params = await searchParams;
const filter = params.type as InterviewType | 'ALL' || 'ALL';
const filter = params.type as string || 'ALL';
const where: any = {};
if (filter !== 'ALL') {
where.type = filter;
}
let interviews: any[] = [];
let items: any[] = [];
try {
interviews = await prisma.interview.findMany({
where,
orderBy: { createdAt: 'desc' }
});
if (filter === 'EVENT') {
const events = await prisma.event.findMany({
orderBy: { date: 'desc' }
});
items = events.map(e => ({
...e,
guestName: 'Événement',
companyName: e.location,
excerpt: e.description,
type: 'EVENT',
duration: new Date(e.date).toLocaleDateString('fr-FR')
}));
} else {
const where: any = {};
if (filter !== 'ALL') {
where.type = filter as InterviewType;
}
const interviews = await prisma.interview.findMany({
where,
orderBy: { createdAt: 'desc' }
});
items = interviews.map(i => ({ ...i }));
// If 'ALL', we might want to also fetch events and mix them
if (filter === 'ALL') {
const events = await prisma.event.findMany({
orderBy: { date: 'desc' },
take: 10
});
const mappedEvents = events.map(e => ({
...e,
guestName: 'Événement',
companyName: e.location,
excerpt: e.description,
type: 'EVENT',
duration: new Date(e.date).toLocaleDateString('fr-FR')
}));
items = [...items, ...mappedEvents].sort((a, b) =>
new Date(b.createdAt || b.date).getTime() - new Date(a.createdAt || a.date).getTime()
);
}
}
} catch (error) {
console.error("Database connection failed on Afro Life page.");
interviews = [];
console.error("Database connection failed on Afro Life page:", error);
items = [];
}
return (
@@ -68,35 +102,48 @@ export default async function AfroLifePage({ searchParams }: Props) {
>
<FileText className="w-4 h-4 mr-2" /> Articles
</Link>
<Link
href="/afrolife?type=EVENT"
className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'EVENT' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
>
<Calendar className="w-4 h-4 mr-2" /> Événements
</Link>
</div>
{/* Grid */}
{interviews.length === 0 ? (
{/* Grid or Timeline */}
{items.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">Aucune interview trouvée dans cette catégorie.</p>
<p className="text-gray-500">Aucun contenu trouvé dans cette catégorie.</p>
</div>
) : filter === 'EVENT' ? (
<EventTimeline events={items} />
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{interviews.map(interview => (
<Link href={`/afrolife/${interview.id}`} key={interview.id} className="group block h-full">
{items.map(item => (
<Link href={`/afrolife/${(item as any).slug || item.id}`} key={item.id} className="group block h-full">
<div className="relative h-64 rounded-xl overflow-hidden shadow-sm group-hover:shadow-xl transition-all duration-300">
<img
src={interview.thumbnailUrl}
alt={interview.title}
src={item.thumbnailUrl}
alt={item.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
/>
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>
{/* Type Badge */}
<div className="absolute top-4 left-4">
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide text-white backdrop-blur-md ${interview.type === InterviewType.VIDEO ? 'bg-red-600/90' : 'bg-blue-600/90'}`}>
{interview.type === InterviewType.VIDEO ? <Play className="w-3 h-3 mr-1 fill-current" /> : <Mic className="w-3 h-3 mr-1" />}
{interview.type === InterviewType.VIDEO ? 'Vidéo' : 'Interview'}
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide text-white backdrop-blur-md ${
item.type === 'VIDEO' ? 'bg-red-600/90' :
item.type === 'EVENT' ? 'bg-amber-600/90' : 'bg-blue-600/90'
}`}>
{item.type === 'VIDEO' ? <Play className="w-3 h-3 mr-1 fill-current" /> :
item.type === 'EVENT' ? <Calendar className="w-3 h-3 mr-1" /> : <Mic className="w-3 h-3 mr-1" />}
{item.type === 'VIDEO' ? 'Vidéo' :
item.type === 'EVENT' ? 'Événement' : 'Interview'}
</span>
</div>
{/* Play Icon Overlay for Videos */}
{interview.type === InterviewType.VIDEO && (
{item.type === 'VIDEO' && (
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div className="w-16 h-16 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
<Play className="w-8 h-8 text-white fill-current ml-1" />
@@ -107,18 +154,16 @@ export default async function AfroLifePage({ searchParams }: Props) {
<div className="pt-6 px-2">
<div className="flex items-center text-xs text-gray-500 mb-3 space-x-3">
<span className="font-semibold text-brand-600 uppercase">{interview.guestName}</span>
<span className="font-semibold text-brand-600 uppercase">{item.guestName}</span>
<span className="w-1 h-1 bg-gray-300 rounded-full"></span>
<span>{interview.companyName}</span>
<span className="truncate max-w-[100px]">{item.companyName}</span>
<span className="w-1 h-1 bg-gray-300 rounded-full"></span>
<span className="flex items-center"><Clock className="w-3 h-3 mr-1"/> {interview.duration || 'N/A'}</span>
<span className="flex items-center flex-nowrap"><Clock className="w-3 h-3 mr-1 shrink-0"/> {item.duration || 'N/A'}</span>
</div>
<h3 className="text-xl font-serif font-bold text-gray-900 mb-2 group-hover:text-brand-600 transition-colors leading-tight line-clamp-2">
{interview.title}
{item.title}
</h3>
<p className="text-gray-600 text-sm line-clamp-2">
{interview.excerpt}
</p>
<div className="text-gray-600 text-sm line-clamp-2 prose-sm" dangerouslySetInnerHTML={{ __html: item.excerpt }} />
</div>
</Link>
))}