56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import type { Lesson } from "@/types/course";
|
|
|
|
type LessonRowProps = {
|
|
index: number;
|
|
lesson: Lesson;
|
|
isActive: boolean;
|
|
isLocked: boolean;
|
|
onSelect: () => void;
|
|
};
|
|
|
|
const typeColors: Record<Lesson["type"], string> = {
|
|
video: "bg-[#ffecee] text-[#ca4d6f]",
|
|
reading: "bg-[#ecfbf4] text-[#2f9d73]",
|
|
interactive: "bg-[#eef4ff] text-[#6288da]",
|
|
};
|
|
|
|
export default function LessonRow({ index, lesson, isActive, isLocked, onSelect }: LessonRowProps) {
|
|
return (
|
|
<button
|
|
className={`w-full rounded-2xl border p-5 text-left transition ${
|
|
isActive ? "border-brand/60 bg-white shadow-sm" : "border-slate-200 bg-white hover:border-slate-300"
|
|
} ${isLocked ? "cursor-not-allowed opacity-60" : ""}`}
|
|
onClick={isLocked ? undefined : onSelect}
|
|
type="button"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-lg font-semibold ${
|
|
isActive ? "border-brand text-brand" : "border-slate-300 text-slate-500"
|
|
}`}
|
|
>
|
|
{isLocked ? "L" : index + 1}
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="mb-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
|
|
<span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${typeColors[lesson.type]}`}>
|
|
{lesson.type}
|
|
</span>
|
|
<span>{lesson.minutes} min</span>
|
|
{isLocked ? <span className="text-slate-400">Locked</span> : null}
|
|
{lesson.isPreview ? <span className="text-[#8a6b00]">Preview</span> : null}
|
|
</div>
|
|
<p className="truncate text-lg text-[#222a38] md:text-2xl">{lesson.title}</p>
|
|
</div>
|
|
|
|
{isActive ? (
|
|
<div className="hidden h-20 w-36 overflow-hidden rounded-xl border border-slate-200 bg-[#202020] md:block">
|
|
<div className="flex h-full items-center justify-center text-2xl text-white/80">Play</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|