Pending course, rest ready for launch
This commit is contained in:
Marcelo
107
app/(public)/courses/[slug]/learn/actions.ts
Normal file
107
app/(public)/courses/[slug]/learn/actions.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
"use server";
|
||||
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { issueCertificateIfEligible } from "@/lib/certificates";
|
||||
import { refreshStudyRecommendations } from "@/lib/recommendations";
|
||||
|
||||
type ToggleLessonCompleteInput = {
|
||||
courseSlug: string;
|
||||
lessonId: string;
|
||||
};
|
||||
|
||||
export async function toggleLessonComplete({ courseSlug, lessonId }: ToggleLessonCompleteInput) {
|
||||
const user = await requireUser();
|
||||
|
||||
if (!user?.id) {
|
||||
return { success: false, error: "Unauthorized" };
|
||||
}
|
||||
|
||||
const lesson = await db.lesson.findUnique({
|
||||
where: { id: lessonId },
|
||||
select: {
|
||||
id: true,
|
||||
module: {
|
||||
select: {
|
||||
courseId: true,
|
||||
course: {
|
||||
select: {
|
||||
slug: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!lesson || lesson.module.course.slug !== courseSlug) {
|
||||
return { success: false, error: "Lesson not found" };
|
||||
}
|
||||
|
||||
const enrollment = await db.enrollment.findUnique({
|
||||
where: {
|
||||
userId_courseId: {
|
||||
userId: user.id,
|
||||
courseId: lesson.module.courseId,
|
||||
},
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
if (!enrollment) {
|
||||
return { success: false, error: "Not enrolled in this course" };
|
||||
}
|
||||
|
||||
const existingProgress = await db.userProgress.findUnique({
|
||||
where: {
|
||||
userId_lessonId: {
|
||||
userId: user.id,
|
||||
lessonId,
|
||||
},
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
isCompleted: true,
|
||||
},
|
||||
});
|
||||
|
||||
const nextCompleted = !existingProgress?.isCompleted;
|
||||
|
||||
if (existingProgress) {
|
||||
await db.userProgress.update({
|
||||
where: { id: existingProgress.id },
|
||||
data: {
|
||||
isCompleted: nextCompleted,
|
||||
finishedAt: nextCompleted ? new Date() : null,
|
||||
lastPlayedAt: new Date(),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await db.userProgress.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
lessonId,
|
||||
isCompleted: true,
|
||||
finishedAt: new Date(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const certificateResult = nextCompleted
|
||||
? await issueCertificateIfEligible(user.id, lesson.module.courseId)
|
||||
: { certificateId: null, certificateNumber: null, newlyIssued: false };
|
||||
|
||||
revalidatePath(`/courses/${courseSlug}/learn`);
|
||||
revalidatePath("/my-courses");
|
||||
revalidatePath("/profile");
|
||||
await refreshStudyRecommendations(user.id);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
isCompleted: nextCompleted,
|
||||
certificateId: certificateResult.certificateId,
|
||||
certificateNumber: certificateResult.certificateNumber,
|
||||
newlyIssuedCertificate: certificateResult.newlyIssued,
|
||||
};
|
||||
}
|
||||
192
app/(public)/courses/[slug]/learn/page.tsx
Normal file
192
app/(public)/courses/[slug]/learn/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import StudentClassroomClient from "@/components/courses/StudentClassroomClient";
|
||||
import { parseLessonDescriptionMeta } from "@/lib/courses/lessonContent";
|
||||
|
||||
type LessonSelect = {
|
||||
id: string;
|
||||
title: unknown;
|
||||
description: unknown;
|
||||
videoUrl: string | null;
|
||||
youtubeUrl: string | null;
|
||||
estimatedDuration: number;
|
||||
isFreePreview: boolean;
|
||||
};
|
||||
type ModuleSelect = { id: string; title: unknown; lessons: LessonSelect[] };
|
||||
type CourseWithModules = { id: string; slug: string; title: unknown; price: unknown; modules: ModuleSelect[] };
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ lesson?: string }>;
|
||||
};
|
||||
|
||||
export default async function CourseLearnPage({ params, searchParams }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const { lesson: requestedLessonId } = await searchParams;
|
||||
|
||||
const user = await requireUser();
|
||||
|
||||
const courseSelect = {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
price: true,
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" as const },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" as const },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
videoUrl: true,
|
||||
youtubeUrl: true,
|
||||
estimatedDuration: true,
|
||||
isFreePreview: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const course = (await db.course.findUnique({
|
||||
where: { slug },
|
||||
select: courseSelect,
|
||||
})) as CourseWithModules | null;
|
||||
|
||||
if (!course) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let enrollment: { id: string } | null = null;
|
||||
let isEnrolled: boolean;
|
||||
|
||||
if (!user?.id) {
|
||||
// Anonymous: no enrollment, preview-only access
|
||||
const allLessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({ id: l.id, isFreePreview: l.isFreePreview }))
|
||||
);
|
||||
const firstPreviewLesson = allLessons.find((l) => l.isFreePreview);
|
||||
if (!firstPreviewLesson) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
isEnrolled = false;
|
||||
} else {
|
||||
enrollment = await db.enrollment.findUnique({
|
||||
where: {
|
||||
userId_courseId: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
},
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
const isFree = Number(course.price) === 0;
|
||||
|
||||
if (!enrollment) {
|
||||
if (isFree) {
|
||||
enrollment = await db.enrollment.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
amountPaid: 0,
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
isEnrolled = true;
|
||||
} else {
|
||||
// Paid course, no enrollment: allow only if there are preview lessons
|
||||
const allLessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({ id: l.id, isFreePreview: l.isFreePreview }))
|
||||
);
|
||||
const firstPreviewLesson = allLessons.find((l) => l.isFreePreview);
|
||||
if (!firstPreviewLesson) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
isEnrolled = false;
|
||||
}
|
||||
} else {
|
||||
isEnrolled = true;
|
||||
}
|
||||
}
|
||||
|
||||
const completedProgress =
|
||||
isEnrolled && user
|
||||
? await db.userProgress.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
isCompleted: true,
|
||||
lesson: {
|
||||
module: { courseId: course.id },
|
||||
},
|
||||
},
|
||||
select: { lessonId: true },
|
||||
})
|
||||
: [];
|
||||
|
||||
const modules = course.modules.map((module) => ({
|
||||
id: module.id,
|
||||
title: getText(module.title) || "Untitled module",
|
||||
lessons: module.lessons.map((lesson) => {
|
||||
const lessonMeta = parseLessonDescriptionMeta(lesson.description);
|
||||
return {
|
||||
id: lesson.id,
|
||||
title: getText(lesson.title) || "Untitled lesson",
|
||||
description: lessonMeta.text,
|
||||
contentType: lessonMeta.contentType,
|
||||
materialUrl: lessonMeta.materialUrl,
|
||||
videoUrl: lesson.videoUrl,
|
||||
youtubeUrl: lesson.youtubeUrl,
|
||||
estimatedDuration: lesson.estimatedDuration,
|
||||
isFreePreview: lesson.isFreePreview,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
const flattenedLessons = modules.flatMap((module) => module.lessons);
|
||||
const flattenedLessonIds = flattenedLessons.map((l) => l.id);
|
||||
|
||||
let initialSelectedLessonId: string;
|
||||
if (isEnrolled) {
|
||||
initialSelectedLessonId =
|
||||
requestedLessonId && flattenedLessonIds.includes(requestedLessonId)
|
||||
? requestedLessonId
|
||||
: flattenedLessonIds[0] ?? "";
|
||||
} else {
|
||||
const firstPreview = flattenedLessons.find((l) => l.isFreePreview);
|
||||
const requestedLesson = requestedLessonId
|
||||
? flattenedLessons.find((l) => l.id === requestedLessonId)
|
||||
: null;
|
||||
if (requestedLesson?.isFreePreview) {
|
||||
initialSelectedLessonId = requestedLessonId!;
|
||||
} else {
|
||||
initialSelectedLessonId = firstPreview?.id ?? "";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StudentClassroomClient
|
||||
courseSlug={course.slug}
|
||||
courseTitle={getText(course.title) || "Untitled course"}
|
||||
modules={modules}
|
||||
initialSelectedLessonId={initialSelectedLessonId}
|
||||
initialCompletedLessonIds={completedProgress.map((p) => p.lessonId)}
|
||||
isEnrolled={isEnrolled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,184 +1,169 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import CourseDetailHeader from "@/components/courses/CourseDetailHeader";
|
||||
import CourseProgressCard from "@/components/courses/CourseProgressCard";
|
||||
import ProgramContentList from "@/components/courses/ProgramContentList";
|
||||
import { getCourseDetailViewModel } from "@/lib/courses/publicCourses";
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
const levelLabel = (level: string) => {
|
||||
if (level === "BEGINNER") return "Beginner";
|
||||
if (level === "INTERMEDIATE") return "Intermediate";
|
||||
if (level === "ADVANCED") return "Advanced";
|
||||
return level;
|
||||
};
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
};
|
||||
|
||||
type DetailActionState = {
|
||||
primaryAction: {
|
||||
label: string;
|
||||
href?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
secondaryAction?: {
|
||||
label: string;
|
||||
href?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
helperText?: string;
|
||||
};
|
||||
|
||||
function buildActionState(args: {
|
||||
slug: string;
|
||||
isAuthenticated: boolean;
|
||||
isEnrolled: boolean;
|
||||
availabilityState: "published" | "upcoming" | "draft";
|
||||
progressPercent: number;
|
||||
firstPreviewLessonId: string | null;
|
||||
price: number;
|
||||
}): DetailActionState {
|
||||
const learnUrl = `/courses/${args.slug}/learn`;
|
||||
const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(`/courses/${args.slug}`)}`;
|
||||
const previewUrl = args.firstPreviewLessonId ? `${learnUrl}?lesson=${args.firstPreviewLessonId}` : undefined;
|
||||
|
||||
if (args.availabilityState !== "published") {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Próximamente",
|
||||
disabled: true,
|
||||
},
|
||||
helperText: "Este programa se encuentra en preparación editorial y estará habilitado en próximas publicaciones.",
|
||||
};
|
||||
}
|
||||
|
||||
if (args.isAuthenticated && args.isEnrolled) {
|
||||
const label = args.progressPercent >= 100 ? "Revisar programa" : args.progressPercent > 0 ? "Continuar" : "Comenzar";
|
||||
return {
|
||||
primaryAction: {
|
||||
label,
|
||||
href: learnUrl,
|
||||
},
|
||||
helperText:
|
||||
args.progressPercent > 0
|
||||
? "Tu avance se conserva automáticamente. Puedes continuar desde la lección más reciente."
|
||||
: "Inicia el recorrido académico desde el primer módulo.",
|
||||
};
|
||||
}
|
||||
|
||||
if (args.isAuthenticated) {
|
||||
if (args.price <= 0) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Comenzar",
|
||||
href: learnUrl,
|
||||
},
|
||||
helperText: "Programa con acceso abierto para iniciar de inmediato.",
|
||||
};
|
||||
}
|
||||
|
||||
if (previewUrl) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Ver clase de muestra",
|
||||
href: previewUrl,
|
||||
},
|
||||
helperText: "El contenido completo está disponible para estudiantes inscritos en el programa.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Inscripción próximamente",
|
||||
disabled: true,
|
||||
},
|
||||
helperText: "La inscripción completa para este programa estará disponible en breve.",
|
||||
};
|
||||
}
|
||||
|
||||
if (previewUrl) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Ver clase de muestra",
|
||||
href: previewUrl,
|
||||
},
|
||||
secondaryAction: {
|
||||
label: "Iniciar sesión",
|
||||
href: loginUrl,
|
||||
},
|
||||
helperText: "Puedes revisar una vista previa o iniciar sesión para gestionar tu itinerario académico.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Iniciar sesión para comenzar",
|
||||
href: loginUrl,
|
||||
},
|
||||
helperText: "Accede con tu cuenta para comenzar este programa y registrar tu progreso.",
|
||||
};
|
||||
}
|
||||
|
||||
export default async function CourseDetailPage({ params }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const user = await requireUser().catch(() => null);
|
||||
|
||||
const course = await db.course.findFirst({
|
||||
where: { slug, status: "PUBLISHED" },
|
||||
include: {
|
||||
author: { select: { fullName: true } },
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
include: {
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
select: { id: true, title: true, estimatedDuration: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: { select: { enrollments: true } },
|
||||
},
|
||||
});
|
||||
|
||||
const course = await getCourseDetailViewModel(slug, user?.id ?? null);
|
||||
if (!course) notFound();
|
||||
|
||||
const user = await requireUser();
|
||||
const isAuthed = Boolean(user?.id);
|
||||
|
||||
const title = getText(course.title) || "Untitled course";
|
||||
const summary = getText(course.description) || "";
|
||||
|
||||
const lessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({
|
||||
id: l.id,
|
||||
title: getText(l.title) || "Untitled lesson",
|
||||
minutes: Math.ceil((l.estimatedDuration ?? 0) / 60),
|
||||
})),
|
||||
);
|
||||
const lessonsCount = lessons.length;
|
||||
|
||||
const redirect = `/courses/${course.slug}/learn`;
|
||||
const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
|
||||
|
||||
const learningOutcomes = [
|
||||
"Understand key legal vocabulary in context",
|
||||
"Apply contract and case analysis patterns",
|
||||
"Improve professional written legal communication",
|
||||
];
|
||||
const actions = buildActionState({
|
||||
slug: course.slug,
|
||||
isAuthenticated: Boolean(user?.id),
|
||||
isEnrolled: course.isEnrolled,
|
||||
availabilityState: course.availabilityState,
|
||||
progressPercent: course.progressPercent,
|
||||
firstPreviewLessonId: course.firstPreviewLessonId,
|
||||
price: course.price,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel overflow-hidden p-0">
|
||||
<div className="grid gap-0 lg:grid-cols-[1.6fr_0.9fr]">
|
||||
<div className="acve-section-base">
|
||||
<Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand" href="/courses">
|
||||
<span>{"<-"}</span>
|
||||
Back to Courses
|
||||
</Link>
|
||||
<section className="grid items-start gap-5 xl:grid-cols-[1.55fr_0.95fr]">
|
||||
<CourseDetailHeader
|
||||
availabilityLabel={course.availabilityLabel}
|
||||
availabilityState={course.availabilityState}
|
||||
description={course.longDescription}
|
||||
durationLabel={course.durationLabel}
|
||||
instructor={course.instructor}
|
||||
lessonCount={course.lessonCount}
|
||||
proficiencyLabel={course.proficiencyLabel}
|
||||
stageLabel={course.stage.levelLabel}
|
||||
studentsCount={course.studentsCount}
|
||||
thumbnailUrl={course.thumbnailUrl}
|
||||
title={course.title}
|
||||
/>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-600">
|
||||
<span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">
|
||||
{levelLabel(course.level)}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 font-semibold">
|
||||
{course.status.toLowerCase()}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1">
|
||||
{lessonsCount} lessons
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="mt-4 text-4xl font-semibold leading-tight text-[#1f2a3a] md:text-5xl">{title}</h1>
|
||||
<p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">{summary}</p>
|
||||
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Students</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">
|
||||
{course._count.enrollments.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Lessons</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{lessonsCount}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructor</p>
|
||||
<p className="mt-1 text-lg font-semibold text-slate-900">
|
||||
{course.author.fullName || "ACVE Team"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="border-t border-slate-200 bg-slate-50/80 p-6 lg:border-l lg:border-t-0">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">What you will learn</h2>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{learningOutcomes.map((item) => (
|
||||
<li key={item} className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<CourseProgressCard
|
||||
availabilityLabel={course.availabilityLabel}
|
||||
completedLessons={course.completedLessons}
|
||||
durationLabel={course.durationLabel}
|
||||
helperText={actions.helperText}
|
||||
instructor={course.instructor}
|
||||
primaryAction={actions.primaryAction}
|
||||
progressPercent={course.progressPercent}
|
||||
secondaryAction={actions.secondaryAction}
|
||||
stageLabel={course.stage.levelLabel}
|
||||
totalLessons={course.totalLessons}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-5 lg:grid-cols-[1.6fr_0.85fr]">
|
||||
<article className="acve-panel acve-section-base">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Course structure preview</h2>
|
||||
<div className="mt-4 grid gap-2">
|
||||
{lessons.slice(0, 5).map((lesson, index) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="font-medium text-slate-800">
|
||||
Lesson {index + 1}: {lesson.title}
|
||||
</span>
|
||||
<span className="text-slate-500">{lesson.minutes} min</span>
|
||||
</div>
|
||||
))}
|
||||
{lessons.length === 0 && (
|
||||
<p className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
|
||||
No lessons yet. Check back soon.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside className="acve-panel space-y-5 p-6">
|
||||
<h2 className="text-2xl text-slate-700 md:text-4xl">Course details</h2>
|
||||
<div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
|
||||
<p className="mb-4 font-semibold text-slate-800">{course.author.fullName || "ACVE Team"}</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
|
||||
<p className="mb-4 font-semibold text-slate-800">{levelLabel(course.level)}</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Lessons</p>
|
||||
<p className="font-semibold text-slate-800">{lessonsCount}</p>
|
||||
</div>
|
||||
{isAuthed ? (
|
||||
<Link
|
||||
className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
|
||||
href={redirect}
|
||||
>
|
||||
Start Course
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
|
||||
href={loginUrl}
|
||||
>
|
||||
Login to start
|
||||
</Link>
|
||||
)}
|
||||
</aside>
|
||||
</section>
|
||||
<ProgramContentList modules={course.modules} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user