614 lines
27 KiB
TypeScript
614 lines
27 KiB
TypeScript
import { useState, useMemo, useEffect } from 'react';
|
|
import {
|
|
FiFilter,
|
|
FiLayers,
|
|
FiSearch,
|
|
FiCode,
|
|
FiShield,
|
|
FiTrendingUp,
|
|
FiChevronRight,
|
|
FiGlobe,
|
|
FiFeather,
|
|
FiActivity,
|
|
FiUsers,
|
|
FiZap,
|
|
FiBriefcase,
|
|
FiMonitor,
|
|
FiGrid
|
|
} from 'react-icons/fi';
|
|
import type { Course } from '../../types/course';
|
|
import { CourseCard } from './CourseCard';
|
|
|
|
interface CourseGridProps {
|
|
courses: Course[];
|
|
cartCourseIds: string[];
|
|
searchQuery: string;
|
|
onAddToCart: (course: Course) => void;
|
|
onOpenDetails: (course: Course) => void;
|
|
onClearSearch: () => void;
|
|
showBanners?: boolean;
|
|
}
|
|
|
|
export const CourseGrid: React.FC<CourseGridProps> = ({
|
|
courses,
|
|
cartCourseIds,
|
|
searchQuery,
|
|
onAddToCart,
|
|
onOpenDetails,
|
|
onClearSearch,
|
|
}) => {
|
|
const [selectedCategory, setSelectedCategory] = useState<string>('Todos');
|
|
const [selectedSubcategory, setSelectedSubcategory] = useState<string>('Todos');
|
|
const [selectedPopularArea, setSelectedPopularArea] = useState<string>('Todos');
|
|
const [selectedLevel, setSelectedLevel] = useState<string>('Todos');
|
|
const [categorySearch, setCategorySearch] = useState<string>('');
|
|
const [sortBy, setSortBy] = useState<'rating' | 'price-asc' | 'price-desc' | 'students'>('students');
|
|
const [localSearch, setLocalSearch] = useState('');
|
|
const [showAll, setShowAll] = useState(false);
|
|
|
|
// Sync local search when global searchQuery prop changes (e.g. from navbar or clear button)
|
|
useEffect(() => {
|
|
setLocalSearch(searchQuery);
|
|
}, [searchQuery]);
|
|
|
|
// Reset subcategory and level when selected category changes
|
|
useEffect(() => {
|
|
setSelectedSubcategory('Todos');
|
|
setSelectedLevel('Todos');
|
|
}, [selectedCategory]);
|
|
|
|
// Reset popular area when category changes (avoid conflicts)
|
|
useEffect(() => {
|
|
if (selectedCategory !== 'Todos') {
|
|
setSelectedPopularArea('Todos');
|
|
setShowAll(false);
|
|
}
|
|
}, [selectedCategory]);
|
|
|
|
// Reset showAll when search is entered
|
|
useEffect(() => {
|
|
if (localSearch.trim() !== '') {
|
|
setShowAll(false);
|
|
}
|
|
}, [localSearch]);
|
|
|
|
// Helper to map and sanitize category names for flexible database mapping
|
|
const getCourseCategory = (course: Course) => {
|
|
const cat = course.category;
|
|
if (cat === 'Desarrollo Web') return 'Informática';
|
|
if (cat === 'Diseño UI/UX') return 'Informática'; // UI/UX maps to Informática
|
|
if (cat === 'Inteligencia Artificial') return 'Ciencia de datos';
|
|
if (cat === 'Ciberseguridad') return 'Tecnologías de la información';
|
|
if (cat === 'Marketing Digital') return 'Empresas';
|
|
if (cat === 'Fotografía') return 'Artes y Humanidades';
|
|
return cat;
|
|
};
|
|
|
|
// Helper to map subcategory topic names dynamically
|
|
const getCourseSubcategory = (course: Course) => {
|
|
if (course.subcategory) return course.subcategory;
|
|
|
|
// Fallback topic mappings based on keywords in title
|
|
const title = course.title.toLowerCase();
|
|
const cat = course.category;
|
|
if (cat === 'Desarrollo Web') {
|
|
if (title.includes('react') || title.includes('next.js') || title.includes('typescript')) return 'Desarrollo Web';
|
|
if (title.includes('aws') || title.includes('cloud') || title.includes('devops') || title.includes('docker')) return 'DevOps & Cloud';
|
|
return 'Desarrollo Web';
|
|
}
|
|
if (cat === 'Diseño UI/UX') {
|
|
if (title.includes('ux') || title.includes('figma')) return 'Diseño UX/UI';
|
|
return 'Sistemas de diseño';
|
|
}
|
|
if (cat === 'Fotografía') return 'Fotografía Digital';
|
|
if (cat === 'Inteligencia Artificial') return 'IA Generativa & LLMs';
|
|
if (cat === 'Ciberseguridad') return 'Ethical Hacking';
|
|
if (cat === 'Marketing Digital') return 'Embudos de venta';
|
|
return 'General';
|
|
};
|
|
|
|
// Compute subcategory list dynamically based on selected category
|
|
const subcategories = useMemo(() => {
|
|
if (selectedCategory === 'Todos') return [];
|
|
|
|
const subcats = courses
|
|
.filter((c) => getCourseCategory(c) === selectedCategory)
|
|
.map((c) => getCourseSubcategory(c));
|
|
|
|
return ['Todos', ...Array.from(new Set(subcats))];
|
|
}, [courses, selectedCategory]);
|
|
|
|
// Category information for dedicated page headers (description and metrics)
|
|
const categoryDetails = useMemo(() => {
|
|
if (selectedCategory === 'Todos') return null;
|
|
|
|
switch (selectedCategory) {
|
|
case 'Informática':
|
|
return {
|
|
description: 'Domina la programación web, algoritmos avanzados, TypeScript, frameworks modernos como React y Next.js, y el desarrollo estructurado de software.',
|
|
credentials: 53,
|
|
totalCourses: 310
|
|
};
|
|
case 'Ciencia de datos':
|
|
return {
|
|
description: 'Conviértete en experto en analizar grandes conjuntos de datos, modelado de Machine Learning, visualización científica e integración de Inteligencia Artificial.',
|
|
credentials: 35,
|
|
totalCourses: 182
|
|
};
|
|
case 'Tecnologías de la información':
|
|
return {
|
|
description: 'Capacítate en administración de redes, infraestructura cloud en AWS, automatización DevOps y auditorías avanzadas de ciberseguridad ofensiva.',
|
|
credentials: 29,
|
|
totalCourses: 150
|
|
};
|
|
case 'Empresas':
|
|
return {
|
|
description: 'Desarrolla habilidades comerciales estratégicas, administración ágil de proyectos (Scrum/Kanban) y embudos de marketing digital de alta conversión.',
|
|
credentials: 42,
|
|
totalCourses: 220
|
|
};
|
|
case 'Artes y Humanidades':
|
|
return {
|
|
description: 'Explora tu potencial creativo y artístico mediante cursos de fotografía digital profesional, composición visual y edición avanzada de imágenes.',
|
|
credentials: 18,
|
|
totalCourses: 94
|
|
};
|
|
default:
|
|
return {
|
|
description: 'Explora cursos líderes en esta disciplina, obtén credenciales de nivel profesional y acelera tu inserción en el mercado laboral.',
|
|
credentials: 12,
|
|
totalCourses: 60
|
|
};
|
|
}
|
|
}, [selectedCategory]);
|
|
|
|
// Filtered & Sorted courses computation
|
|
const filteredCourses = useMemo(() => {
|
|
return courses
|
|
.filter((course) => {
|
|
// Search query filter
|
|
const activeSearch = localSearch.trim() || searchQuery.trim();
|
|
if (activeSearch) {
|
|
const q = activeSearch.toLowerCase();
|
|
const matchTitle = course.title.toLowerCase().includes(q);
|
|
const matchSub = course.subtitle.toLowerCase().includes(q);
|
|
const matchCat = course.category.toLowerCase().includes(q);
|
|
const matchInst = course.instructor.name.toLowerCase().includes(q);
|
|
if (!matchTitle && !matchSub && !matchCat && !matchInst) return false;
|
|
}
|
|
|
|
// Category Page Filter (active only when selectedCategory !== 'Todos')
|
|
if (selectedCategory !== 'Todos') {
|
|
const cat = getCourseCategory(course);
|
|
if (cat !== selectedCategory) return false;
|
|
|
|
// Level Filter (inside category page level pills)
|
|
if (selectedLevel !== 'Todos') {
|
|
if (course.level !== selectedLevel && course.level !== 'Todos los niveles') return false;
|
|
}
|
|
|
|
// Subcategory filter
|
|
if (selectedSubcategory !== 'Todos') {
|
|
const sub = getCourseSubcategory(course);
|
|
if (sub !== selectedSubcategory) return false;
|
|
}
|
|
} else {
|
|
// Main Page Popular Area Filter (active only when selectedCategory === 'Todos')
|
|
if (selectedPopularArea !== 'Todos') {
|
|
const cat = getCourseCategory(course);
|
|
if (cat !== selectedPopularArea) return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
})
|
|
.sort((a, b) => {
|
|
if (sortBy === 'rating') return b.rating - a.rating;
|
|
if (sortBy === 'price-asc') return a.price - b.price;
|
|
if (sortBy === 'price-desc') return b.price - a.price;
|
|
return b.studentsCount - a.studentsCount; // default: popular
|
|
});
|
|
}, [courses, searchQuery, localSearch, selectedCategory, selectedSubcategory, selectedPopularArea, selectedLevel, sortBy]);
|
|
|
|
// Filtered courses for general list when selectedCategory === 'Todos'
|
|
const generalCourses = useMemo<Course[]>(() => {
|
|
return courses
|
|
.filter((course) => {
|
|
// Search query filter
|
|
const activeSearch = localSearch.trim() || searchQuery.trim();
|
|
if (activeSearch) {
|
|
const q = activeSearch.toLowerCase();
|
|
const matchTitle = course.title.toLowerCase().includes(q);
|
|
const matchSub = course.subtitle.toLowerCase().includes(q);
|
|
const matchCat = course.category.toLowerCase().includes(q);
|
|
const matchInst = course.instructor.name.toLowerCase().includes(q);
|
|
if (!matchTitle && !matchSub && !matchCat && !matchInst) return false;
|
|
}
|
|
|
|
// Popular area filter
|
|
if (selectedPopularArea !== 'Todos') {
|
|
const cat = getCourseCategory(course);
|
|
if (cat !== selectedPopularArea) return false;
|
|
}
|
|
|
|
return true;
|
|
})
|
|
.sort((a, b) => b.studentsCount - a.studentsCount);
|
|
}, [courses, searchQuery, localSearch, selectedPopularArea]);
|
|
|
|
const resetAllFilters = () => {
|
|
setSelectedCategory('Todos');
|
|
setSelectedSubcategory('Todos');
|
|
setSelectedPopularArea('Todos');
|
|
setSelectedLevel('Todos');
|
|
setSortBy('students');
|
|
setLocalSearch('');
|
|
setShowAll(false);
|
|
onClearSearch();
|
|
};
|
|
|
|
// Dynamic Icon Mapper Helper for category pills
|
|
const getCategoryIcon = (catName: string) => {
|
|
const name = catName.toLowerCase();
|
|
if (name.includes('informática') || name.includes('computación') || name.includes('programación') || name.includes('código')) {
|
|
return <FiCode className="text-xs shrink-0 text-cyan-400" />;
|
|
}
|
|
if (name.includes('tecnolog') || name.includes('redes') || name.includes('sistemas') || name.includes('monitor')) {
|
|
return <FiMonitor className="text-xs shrink-0 text-cyan-400" />;
|
|
}
|
|
if (name.includes('datos') || name.includes('inteligencia') || name.includes('ia') || name.includes('analytics') || name.includes('trending')) {
|
|
return <FiTrendingUp className="text-xs shrink-0" />;
|
|
}
|
|
if (name.includes('ingenier') || name.includes('física') || name.includes('química') || name.includes('actividad')) {
|
|
return <FiActivity className="text-xs shrink-0 text-cyan-400" />;
|
|
}
|
|
if (name.includes('matemát') || name.includes('lógica') || name.includes('cálculo') || name.includes('grid')) {
|
|
return <FiGrid className="text-xs shrink-0" />;
|
|
}
|
|
if (name.includes('empresa') || name.includes('negocio') || name.includes('finanzas') || name.includes('briefcase')) {
|
|
return <FiBriefcase className="text-xs shrink-0" />;
|
|
}
|
|
if (name.includes('arte') || name.includes('humanidad') || name.includes('diseño') || name.includes('feather') || name.includes('fotografía')) {
|
|
return <FiFeather className="text-xs shrink-0" />;
|
|
}
|
|
if (name.includes('idioma') || name.includes('lengua') || name.includes('globe') || name.includes('inglés')) {
|
|
return <FiGlobe className="text-xs shrink-0" />;
|
|
}
|
|
if (name.includes('social') || name.includes('comunidad') || name.includes('users') || name.includes('psicología')) {
|
|
return <FiUsers className="text-xs shrink-0" />;
|
|
}
|
|
if (name.includes('personal') || name.includes('liderazgo') || name.includes('zap') || name.includes('crecimiento')) {
|
|
return <FiZap className="text-xs shrink-0 text-cyan-400" />;
|
|
}
|
|
if (name.includes('salud') || name.includes('shield') || name.includes('medicina') || name.includes('bienestar')) {
|
|
return <FiShield className="text-xs shrink-0 text-cyan-400" />;
|
|
}
|
|
return <FiLayers className="text-xs shrink-0" />; // generic fallback
|
|
};
|
|
|
|
// Get all unique category names
|
|
const allCategories = useMemo(() => {
|
|
return Array.from(new Set(courses.map(getCourseCategory))).sort();
|
|
}, [courses]);
|
|
|
|
// Filter categories by categorySearch query
|
|
const filteredCategories = useMemo(() => {
|
|
const query = categorySearch.trim().toLowerCase();
|
|
return allCategories.filter(cat => cat.toLowerCase().includes(query));
|
|
}, [allCategories, categorySearch]);
|
|
|
|
// Popular Areas matching "Más populares" pills from Coursera screenshot
|
|
const popularAreasList = [
|
|
{ name: 'Empresas' },
|
|
{ name: 'Ciencia de datos' },
|
|
{ name: 'Tecnologías de la información' },
|
|
{ name: 'Informática' },
|
|
];
|
|
|
|
return (
|
|
<section id="catalog-section" className="py-6 bg-slate-950/60">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
|
|
|
|
{/* VIEW TYPE A: GENERAL EXPLORE PAGE */}
|
|
{selectedCategory === 'Todos' ? (
|
|
<div className="space-y-8">
|
|
|
|
{/* Section Header & Search Bar (Side-by-Side) */}
|
|
<div className="border-b border-slate-800/80 pb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2 text-cyan-400 text-xs font-bold">
|
|
<FiLayers />
|
|
<span>Catálogo de recursos</span>
|
|
</div>
|
|
<h2 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
|
|
Explorar por categoría
|
|
</h2>
|
|
<p className="text-sm text-slate-400">
|
|
Selecciona una categoría para ver los cursos y certificaciones disponibles.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Search Bar compact on the right */}
|
|
<div className="relative w-full md:w-80 lg:w-96 shrink-0">
|
|
<FiSearch className="absolute left-4 top-3.5 text-slate-400 text-base" />
|
|
<input
|
|
type="text"
|
|
value={localSearch}
|
|
onChange={(e) => setLocalSearch(e.target.value)}
|
|
placeholder="Buscar cursos..."
|
|
className="w-full pl-11 pr-4 py-3 bg-slate-900 border border-slate-800 rounded-2xl text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/* Explore Categories Directory */}
|
|
<div className="space-y-4 pt-2">
|
|
{/* Category Search Filter Input */}
|
|
{allCategories.length > 5 && (
|
|
<div className="flex justify-end">
|
|
<div className="relative w-full sm:w-64 shrink-0">
|
|
<FiFilter className="absolute left-3.5 top-2.5 text-slate-500 text-xs" />
|
|
<input
|
|
type="text"
|
|
value={categorySearch}
|
|
onChange={(e) => setCategorySearch(e.target.value)}
|
|
placeholder="Filtrar categorías por nombre..."
|
|
className="w-full pl-9 pr-4 py-2 bg-slate-900 border border-slate-800 rounded-full text-xs text-slate-200 placeholder-slate-505 focus:outline-none focus:border-cyan-500 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{filteredCategories.length > 0 ? (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
|
|
{filteredCategories.map((catName) => (
|
|
<button
|
|
key={catName}
|
|
onClick={() => setSelectedCategory(catName)}
|
|
className="flex items-center gap-3 pl-3 pr-4 py-2.5 bg-slate-900/30 hover:bg-slate-900 border border-slate-850 hover:border-cyan-500/30 text-slate-300 hover:text-white rounded-full text-xs font-semibold hover:-translate-y-0.5 hover:shadow-lg hover:shadow-cyan-500/5 transition-all duration-200 cursor-pointer group"
|
|
>
|
|
{/* Circle icon wrapper */}
|
|
<div className="w-6 h-6 rounded-full bg-slate-950 border border-slate-850 flex items-center justify-center text-slate-400 group-hover:text-cyan-400 transition-colors shrink-0">
|
|
{getCategoryIcon(catName)}
|
|
</div>
|
|
<span className="truncate">{catName}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="py-8 text-center bg-slate-900/10 rounded-2xl border border-slate-900/80 p-6">
|
|
<p className="text-xs text-slate-400">
|
|
No se encontraron categorías que coincidan con "{categorySearch}".
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
|
|
|
|
{/* 2. Áreas más populares (Sentence case, descriptive subtitle) */}
|
|
<div className="space-y-3 pt-4 border-t border-slate-900/60">
|
|
<h3 className="text-xl font-bold text-white tracking-tight">
|
|
Áreas más populares
|
|
</h3>
|
|
<p className="text-xs text-slate-400">
|
|
Descubre los temas de mayor demanda laboral en la actualidad.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2.5">
|
|
{/* Todos Pill */}
|
|
<button
|
|
onClick={() => {
|
|
setSelectedPopularArea('Todos');
|
|
setShowAll(false);
|
|
}}
|
|
className={`px-4 py-2 rounded-full text-xs font-semibold border transition-all cursor-pointer ${selectedPopularArea === 'Todos' && !showAll
|
|
? 'bg-slate-200 border-slate-200 text-slate-950 font-bold shadow-md'
|
|
: 'bg-slate-900/30 hover:bg-slate-900 border-slate-800/80 hover:border-slate-700 text-slate-300 hover:text-white'
|
|
}`}
|
|
>
|
|
Todos
|
|
</button>
|
|
|
|
{/* Popular Area Pills */}
|
|
{popularAreasList.map((area) => {
|
|
const isSelected = selectedPopularArea === area.name;
|
|
return (
|
|
<button
|
|
key={area.name}
|
|
onClick={() => setSelectedPopularArea((prev) => (prev === area.name ? 'Todos' : area.name))}
|
|
className={`px-4 py-2 rounded-full text-xs font-semibold border transition-all cursor-pointer ${isSelected
|
|
? 'bg-slate-200 border-slate-200 text-slate-950 font-bold shadow-md'
|
|
: 'bg-slate-900/30 hover:bg-slate-900 border-slate-800/80 hover:border-slate-700 text-slate-300 hover:text-white'
|
|
}`}
|
|
>
|
|
{area.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* General Courses Grid */}
|
|
<div className="pt-6 border-t border-slate-900/80 space-y-4">
|
|
<div className="space-y-1">
|
|
<h3 className="text-xl font-bold text-white tracking-tight">
|
|
Listado de cursos
|
|
</h3>
|
|
<p className="text-xs text-slate-400">
|
|
Todos los cursos incluyen material de aprendizaje de alta calidad y acceso permanente.
|
|
</p>
|
|
</div>
|
|
|
|
{generalCourses.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
|
{generalCourses.map((course) => (
|
|
<CourseCard
|
|
key={course.id}
|
|
course={course}
|
|
isInCart={cartCourseIds.includes(course.id)}
|
|
onAddToCart={onAddToCart}
|
|
onOpenDetails={onOpenDetails}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-20 bg-slate-900/40 rounded-2xl border border-slate-800 p-8 space-y-4">
|
|
<div className="w-16 h-16 rounded-full bg-slate-800 text-slate-400 flex items-center justify-center mx-auto text-2xl">
|
|
<FiFilter />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-white">No se encontraron cursos</h3>
|
|
<button
|
|
onClick={resetAllFilters}
|
|
className="px-4 py-2 bg-gradient-to-r from-blue-600 to-cyan-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-cyan-500/20"
|
|
>
|
|
Restablecer filtros
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
) : (
|
|
/* VIEW TYPE B: DEDICATED CATEGORY PAGE */
|
|
<div className="space-y-8">
|
|
|
|
{/* Breadcrumbs Navigation */}
|
|
<div className="flex items-center gap-2 text-xs text-slate-400 select-none">
|
|
<span
|
|
className="hover:text-cyan-400 cursor-pointer transition-colors"
|
|
onClick={resetAllFilters}
|
|
>
|
|
Categorías
|
|
</span>
|
|
<FiChevronRight className="text-[10px] text-slate-650" />
|
|
<span className="text-slate-200 font-medium select-text">
|
|
{selectedCategory}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Category Page Header Block (Title, Description, and Metrics side-by-side) */}
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pb-6 border-b border-slate-800">
|
|
<div className="space-y-3 max-w-3xl">
|
|
<h1 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
|
{selectedCategory}
|
|
</h1>
|
|
{categoryDetails && (
|
|
<p className="text-sm text-slate-400 leading-relaxed">
|
|
{categoryDetails.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Metrics block on the right */}
|
|
{categoryDetails && (
|
|
<div className="flex items-center gap-8 lg:pl-8 lg:border-l border-slate-800 shrink-0 select-none">
|
|
<div className="text-center">
|
|
<div className="text-3xl font-extrabold text-white">{categoryDetails.credentials}</div>
|
|
<div className="text-xs text-slate-400 font-medium">credenciales</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-xs text-slate-400 font-medium">cursos</div>
|
|
<div className="text-3xl font-extrabold text-white">de {categoryDetails.totalCourses}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Subcategories - visible only when category has multiple topics */}
|
|
{subcategories.length > 2 && (
|
|
<div className="space-y-3 pt-1">
|
|
<div className="text-xs text-slate-400 font-semibold">Temas de {selectedCategory}</div>
|
|
<div className="flex flex-wrap gap-2.5">
|
|
{subcategories.map((sub) => {
|
|
const isSubSelected = selectedSubcategory === sub;
|
|
return (
|
|
<button
|
|
key={sub}
|
|
onClick={() => setSelectedSubcategory(sub)}
|
|
className={`flex items-center gap-1.5 px-4 py-2 rounded-full text-xs font-semibold transition-all border cursor-pointer ${isSubSelected
|
|
? 'bg-cyan-500/10 border-cyan-500/40 text-cyan-300 shadow-md shadow-cyan-500/5'
|
|
: 'bg-slate-900/60 hover:bg-slate-900 border-slate-800 hover:border-slate-700 text-slate-300 hover:text-white'
|
|
}`}
|
|
>
|
|
<span>{sub === 'Todos' ? `Todos en ${selectedCategory}` : sub}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* "Filtrar por nivel" (Sentence case, descriptive subtitle, capsules format) */}
|
|
<div className="space-y-3">
|
|
<h3 className="text-xl font-bold text-white tracking-tight">
|
|
Filtrar por nivel
|
|
</h3>
|
|
<p className="text-xs text-slate-400">
|
|
Selecciona la dificultad adecuada para tu ritmo de aprendizaje.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-2.5">
|
|
{['Todos', 'Principiante', 'Intermedio', 'Avanzado'].map((lvl) => {
|
|
const isLvlSelected = selectedLevel === lvl;
|
|
return (
|
|
<button
|
|
key={lvl}
|
|
onClick={() => setSelectedLevel(lvl)}
|
|
className={`px-4 py-2 rounded-full text-xs font-semibold border transition-all cursor-pointer ${isLvlSelected
|
|
? 'bg-slate-200 border-slate-200 text-slate-950 font-bold shadow-md'
|
|
: 'bg-slate-900/30 hover:bg-slate-900 border-slate-800/80 hover:border-slate-700 text-slate-300 hover:text-white'
|
|
}`}
|
|
>
|
|
{lvl === 'Todos' ? 'Todos los niveles' : lvl}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section: Listado de cursos (Descriptive title & subtitle) */}
|
|
<div className="pt-6 border-t border-slate-900/80 space-y-4">
|
|
<div className="space-y-1">
|
|
<h3 className="text-xl font-bold text-white tracking-tight">
|
|
Listado de cursos de {selectedCategory}
|
|
</h3>
|
|
<p className="text-xs text-slate-400">
|
|
Encuentra el material didáctico necesario para avanzar en tu formación profesional.
|
|
</p>
|
|
</div>
|
|
|
|
{filteredCourses.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
|
{filteredCourses.map((course) => (
|
|
<CourseCard
|
|
key={course.id}
|
|
course={course}
|
|
isInCart={cartCourseIds.includes(course.id)}
|
|
onAddToCart={onAddToCart}
|
|
onOpenDetails={onOpenDetails}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-20 bg-slate-900/40 rounded-2xl border border-slate-800 p-8 space-y-4">
|
|
<div className="w-16 h-16 rounded-full bg-slate-800 text-slate-400 flex items-center justify-center mx-auto text-2xl">
|
|
<FiFilter />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-white">No se encontraron cursos en este nivel</h3>
|
|
<button
|
|
onClick={() => setSelectedLevel('Todos')}
|
|
className="px-4 py-2 bg-gradient-to-r from-blue-600 to-cyan-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-cyan-500/20"
|
|
>
|
|
Ver todos los niveles
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |