first commit

2026-02-22 20:25:47 +01:00
commit a4f85b0b7b
31 changed files with 5870 additions and 0 deletions
--- a/pages/InterviewDetailPage.tsx
+++ b/pages/InterviewDetailPage.tsx
@@ -0,0 +1,110 @@
+
+import React, { useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Share2, Play, Calendar, User, Building2 } from 'lucide-react';
+import { MOCK_INTERVIEWS } from '../services/mockData';
+import { InterviewType } from '../types';
+
+const InterviewDetailPage = () => {
+  const { id } = useParams();
+  const interview = MOCK_INTERVIEWS.find(i => i.id === id);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [id]);
+
+  if (!interview) return null;
+
+  // 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 = interview.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 to="/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">
+                    {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}
+                </h1>
+                
+                <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>
+                    <div className="flex items-center">
+                        <Calendar className="w-4 h-4 mr-2 text-brand-500" />
+                        {interview.date}
+                    </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.videoUrl ? (
+                        <iframe 
+                            src={getEmbedUrl(interview.videoUrl) || ''} 
+                            title={interview.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">
+                             <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">
+                    <img src={interview.thumbnailUrl} alt={interview.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 */}
+            <div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600">
+                {!isVideo && interview.content ? (
+                     interview.content.split('\n').map((paragraph, idx) => (
+                        <p key={idx}>{paragraph}</p>
+                     ))
+                ) : (
+                    <p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
+                        {interview.excerpt}
+                    </p>
+                )}
+            </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
+                </button>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default InterviewDetailPage;