40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
import CourseCard from "@/components/courses/CourseCard";
|
|
import type { CatalogSectionView } from "@/lib/courses/publicCourses";
|
|
|
|
type ProgramSectionProps = {
|
|
section: CatalogSectionView;
|
|
};
|
|
|
|
export default function ProgramSection({ section }: ProgramSectionProps) {
|
|
return (
|
|
<section className="acve-panel acve-section-base scroll-mt-[13.5rem]" id={section.anchorId}>
|
|
<div className="flex flex-wrap items-end justify-between gap-3">
|
|
<div>
|
|
<h2 className="acve-heading text-2xl md:text-3xl">{section.sectionTitle}</h2>
|
|
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-muted-foreground md:text-base">
|
|
{section.sectionDescription}
|
|
</p>
|
|
</div>
|
|
<p className="rounded-full border border-border/80 bg-card/70 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
|
{section.courses.length} programas
|
|
</p>
|
|
</div>
|
|
|
|
{section.courses.length === 0 ? (
|
|
<div className="mt-6 rounded-2xl border border-dashed border-border bg-muted/35 px-6 py-9 text-center">
|
|
<p className="text-lg font-semibold text-foreground">Sin programas visibles por ahora</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Publicaremos nuevas rutas académicas para esta etapa en próximas actualizaciones.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{section.courses.map((course) => (
|
|
<CourseCard key={course.id} course={course} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|