44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Course } from '../types';
|
|
import CourseCard from './CourseCard';
|
|
|
|
interface CourseCarouselProps {
|
|
key?: string;
|
|
title: string;
|
|
courses: (Course & { progress?: number; totalLessons?: number; completedLessons?: number; isUnlocked?: boolean })[];
|
|
onSelectCourse: (courseId: string) => void;
|
|
onUnlockCourse?: (course: any) => void;
|
|
subscriptionStatus: string;
|
|
}
|
|
|
|
export default function CourseCarousel({ title, courses, onSelectCourse, onUnlockCourse, subscriptionStatus }: CourseCarouselProps) {
|
|
if (courses.length === 0) return null;
|
|
|
|
return (
|
|
<div className="space-y-4 py-4">
|
|
{/* Category Title */}
|
|
<div className="flex items-center space-x-2 border-l-4 border-[#E50914] pl-3">
|
|
<h2 className="font-display font-extrabold text-lg md:text-xl text-white tracking-tight">
|
|
{title}
|
|
</h2>
|
|
<span className="text-zinc-500 text-xs font-bold">
|
|
({courses.length} {courses.length === 1 ? 'curso' : 'cursos'})
|
|
</span>
|
|
</div>
|
|
|
|
{/* Grid container (Scrollable on smaller viewports, neat grid on larger) */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{courses.map(course => (
|
|
<CourseCard
|
|
key={course.id}
|
|
course={course}
|
|
onSelect={onSelectCourse}
|
|
onUnlockRequest={onUnlockCourse}
|
|
subscriptionStatus={subscriptionStatus}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|