First commit

components/LessonRow.tsx

@@ -0,0 +1,55 @@
+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>
+  );
+}