347 lines
15 KiB
TypeScript
347 lines
15 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useParams, useNavigate } from 'react-router';
|
|
import type { Course } from '../types/course';
|
|
import {
|
|
FiStar,
|
|
FiClock,
|
|
FiBook,
|
|
FiGlobe,
|
|
FiCheck,
|
|
FiShoppingCart,
|
|
FiPlay,
|
|
FiChevronDown,
|
|
FiChevronUp,
|
|
FiAward,
|
|
FiShield,
|
|
FiArrowLeft
|
|
} from 'react-icons/fi';
|
|
|
|
interface CourseDetailViewProps {
|
|
courses: Course[];
|
|
cartCourseIds: string[];
|
|
onAddToCart: (course: Course) => void;
|
|
onBuyNow: (course: Course) => void;
|
|
}
|
|
|
|
export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
|
|
courses,
|
|
cartCourseIds,
|
|
onAddToCart,
|
|
onBuyNow,
|
|
}) => {
|
|
const { courseId } = useParams<{ courseId: string }>();
|
|
const navigate = useNavigate();
|
|
|
|
const course = courses.find((c) => c.id === courseId) || courses[0];
|
|
const isInCart = cartCourseIds.includes(course.id);
|
|
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'curriculum' | 'instructor' | 'reviews'>('overview');
|
|
const [expandedModules, setExpandedModules] = useState<string[]>([course.modules[0]?.id || 'm-1']);
|
|
|
|
const toggleModule = (id: string) => {
|
|
if (expandedModules.includes(id)) {
|
|
setExpandedModules(expandedModules.filter((mId) => mId !== id));
|
|
} else {
|
|
setExpandedModules([...expandedModules, id]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 pb-20">
|
|
|
|
{/* Top Breadcrumb & Back Navigation */}
|
|
<div className="bg-slate-900/60 border-b border-slate-800 py-3">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<button
|
|
onClick={() => navigate('/courses')}
|
|
className="inline-flex items-center gap-2 text-xs font-semibold text-slate-400 hover:text-cyan-400 transition"
|
|
>
|
|
<FiArrowLeft /> Regresar al Catálogo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Course Hero & Details */}
|
|
<div className="bg-gradient-to-b from-slate-900 via-slate-950 to-slate-950 border-b border-slate-800 py-10 lg:py-14">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
|
|
|
|
{/* Left Info Column */}
|
|
<div className="lg:col-span-8 space-y-6">
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
|
<span className="px-3 py-1 rounded-full font-bold bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">
|
|
{course.category}
|
|
</span>
|
|
<span className="px-2.5 py-1 rounded bg-slate-800 text-slate-300 font-medium">
|
|
Nivel: {course.level}
|
|
</span>
|
|
{course.badge && (
|
|
<span className="px-2.5 py-1 rounded bg-amber-500 text-slate-950 font-black">
|
|
🔥 {course.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<h1 className="text-3xl sm:text-4xl font-extrabold text-white leading-tight">
|
|
{course.title}
|
|
</h1>
|
|
|
|
<p className="text-slate-300 text-base sm:text-lg leading-relaxed">
|
|
{course.subtitle}
|
|
</p>
|
|
|
|
{/* Rating & Instructor summary */}
|
|
<div className="flex flex-wrap items-center gap-4 text-xs text-slate-300 pt-1">
|
|
<div className="flex items-center gap-1.5 font-bold text-amber-400">
|
|
<span>{course.rating.toFixed(1)}</span>
|
|
<div className="flex">
|
|
{[...Array(5)].map((_, i) => (
|
|
<FiStar key={i} className="fill-amber-400 text-amber-400 text-sm" />
|
|
))}
|
|
</div>
|
|
<span className="text-slate-400 font-normal">({course.reviewsCount} reseñas)</span>
|
|
</div>
|
|
|
|
<span className="text-slate-600">•</span>
|
|
<span className="text-slate-300">{course.studentsCount.toLocaleString()} alumnos inscritos</span>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-6 text-xs text-slate-400 pt-2 border-t border-slate-800/80">
|
|
<div className="flex items-center gap-2">
|
|
<img
|
|
src={course.instructor.avatar}
|
|
alt={course.instructor.name}
|
|
className="w-8 h-8 rounded-full object-cover ring-1 ring-cyan-400"
|
|
/>
|
|
<span>Creado por <strong className="text-white font-medium">{course.instructor.name}</strong></span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5">
|
|
<FiGlobe className="text-cyan-400" />
|
|
<span>{course.language}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5">
|
|
<FiClock className="text-cyan-400" />
|
|
<span>Última actualización: {course.updatedAt}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Right Sticky Purchase Card */}
|
|
<div className="lg:col-span-4">
|
|
<div className="bg-slate-900 border border-slate-700/80 rounded-3xl p-6 shadow-2xl space-y-6 sticky top-24">
|
|
|
|
{/* Thumbnail Preview */}
|
|
<div className="relative rounded-2xl overflow-hidden aspect-video bg-slate-800 group">
|
|
<img
|
|
src={course.thumbnail}
|
|
alt={course.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-slate-950/40 flex items-center justify-center">
|
|
<div className="w-14 h-14 rounded-full bg-cyan-500 text-slate-950 flex items-center justify-center text-xl shadow-xl shadow-cyan-500/40 group-hover:scale-110 transition">
|
|
<FiPlay className="ml-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price section */}
|
|
<div className="space-y-1">
|
|
<div className="flex items-baseline gap-3">
|
|
<span className="text-3xl font-black text-white font-mono">
|
|
${course.price.toFixed(2)}
|
|
</span>
|
|
<span className="text-sm text-slate-500 line-through font-mono">
|
|
${course.originalPrice.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-emerald-400 font-semibold">
|
|
¡Ahorra un {Math.round(((course.originalPrice - course.price) / course.originalPrice) * 100)}%!
|
|
</p>
|
|
</div>
|
|
|
|
{/* Buttons */}
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => onBuyNow(course)}
|
|
className="w-full py-3.5 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white font-bold rounded-xl text-sm shadow-xl shadow-cyan-500/25 transition-all text-center"
|
|
>
|
|
Comprar Ahora
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => onAddToCart(course)}
|
|
className={`w-full py-3.5 border rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-2 ${
|
|
isInCart
|
|
? 'bg-emerald-500/20 border-emerald-500/40 text-emerald-300'
|
|
: 'bg-slate-800 hover:bg-slate-700 border-slate-700 text-white'
|
|
}`}
|
|
>
|
|
{isInCart ? <FiCheck /> : <FiShoppingCart />}
|
|
<span>{isInCart ? 'En el Carrito' : 'Añadir al Carrito'}</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Benefits checklist */}
|
|
<div className="space-y-2.5 pt-4 border-t border-slate-800 text-xs text-slate-300">
|
|
<h4 className="font-bold text-white uppercase tracking-wider text-[11px]">Este curso incluye:</h4>
|
|
<div className="flex items-center gap-2">
|
|
<FiClock className="text-cyan-400 shrink-0" />
|
|
<span>{course.duration} de video bajo demanda</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<FiBook className="text-cyan-400 shrink-0" />
|
|
<span>{course.lessonsCount} lecciones descargables</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<FiAward className="text-cyan-400 shrink-0" />
|
|
<span>Certificado de finalización</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<FiShield className="text-emerald-400 shrink-0" />
|
|
<span>Garantía de reembolso de 30 días</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content Tabs & Curriculum */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="lg:w-8/12 space-y-10">
|
|
|
|
{/* Navigation Tabs */}
|
|
<div className="flex border-b border-slate-800 space-x-6 text-sm font-semibold">
|
|
<button
|
|
onClick={() => setActiveTab('overview')}
|
|
className={`pb-3 transition-colors ${
|
|
activeTab === 'overview'
|
|
? 'text-cyan-400 border-b-2 border-cyan-400'
|
|
: 'text-slate-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Descripción
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('curriculum')}
|
|
className={`pb-3 transition-colors ${
|
|
activeTab === 'curriculum'
|
|
? 'text-cyan-400 border-b-2 border-cyan-400'
|
|
: 'text-slate-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Temario del Curso ({course.modules.length} módulos)
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('instructor')}
|
|
className={`pb-3 transition-colors ${
|
|
activeTab === 'instructor'
|
|
? 'text-cyan-400 border-b-2 border-cyan-400'
|
|
: 'text-slate-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Instructor
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab 1: What you will learn */}
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-8">
|
|
<div className="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 space-y-4">
|
|
<h3 className="text-lg font-bold text-white">Lo que aprenderás</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-slate-300">
|
|
{course.whatYouWillLearn.map((item, idx) => (
|
|
<div key={idx} className="flex items-start gap-2">
|
|
<FiCheck className="text-cyan-400 shrink-0 mt-0.5" />
|
|
<span>{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<h3 className="text-lg font-bold text-white">Requisitos previas</h3>
|
|
<ul className="list-disc list-inside space-y-1.5 text-xs text-slate-300">
|
|
{course.requirements.map((req, idx) => (
|
|
<li key={idx}>{req}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab 2: Curriculum Accordion */}
|
|
{activeTab === 'curriculum' && (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-bold text-white">Contenido del Programa</h3>
|
|
<div className="divide-y divide-slate-800 border border-slate-800 rounded-2xl bg-slate-900/60 overflow-hidden">
|
|
{course.modules.map((mod) => (
|
|
<div key={mod.id} className="bg-slate-900/90">
|
|
<button
|
|
onClick={() => toggleModule(mod.id)}
|
|
className="w-full px-5 py-4 flex items-center justify-between text-left hover:bg-slate-800/60 transition"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{expandedModules.includes(mod.id) ? (
|
|
<FiChevronUp className="text-cyan-400 text-lg" />
|
|
) : (
|
|
<FiChevronDown className="text-slate-500 text-lg" />
|
|
)}
|
|
<span className="text-sm font-bold text-white">{mod.title}</span>
|
|
</div>
|
|
<span className="text-xs text-slate-400 font-mono">{mod.lessons.length} lecciones</span>
|
|
</button>
|
|
|
|
{expandedModules.includes(mod.id) && (
|
|
<div className="px-5 pb-4 space-y-2 bg-slate-950/40 divide-y divide-slate-800/40">
|
|
{mod.lessons.map((les) => (
|
|
<div key={les.id} className="pt-2 flex items-center justify-between text-xs text-slate-300">
|
|
<div className="flex items-center gap-2">
|
|
<FiPlay className="text-cyan-400 text-xs" />
|
|
<span>{les.title}</span>
|
|
</div>
|
|
<span className="text-slate-500 font-mono text-[11px]">{les.duration}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab 3: Instructor */}
|
|
{activeTab === 'instructor' && (
|
|
<div className="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src={course.instructor.avatar}
|
|
alt={course.instructor.name}
|
|
className="w-16 h-16 rounded-full object-cover ring-2 ring-cyan-400"
|
|
/>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white">{course.instructor.name}</h3>
|
|
<p className="text-xs text-cyan-400 font-medium">{course.instructor.role}</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-slate-300 leading-relaxed">
|
|
{course.instructor.bio}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|