66 lines
2.7 KiB
TypeScript
Executable File
66 lines
2.7 KiB
TypeScript
Executable File
import type { Lesson } from "@/types/course";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type LessonRowProps = {
|
|
index: number;
|
|
lesson: Lesson;
|
|
isActive: boolean;
|
|
isLocked: boolean;
|
|
onSelect: () => void;
|
|
};
|
|
|
|
const typeColors: Record<Lesson["type"], string> = {
|
|
video: "bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400",
|
|
reading: "bg-green-50 text-green-600 dark:bg-green-900/20 dark:text-green-400",
|
|
interactive: "bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400",
|
|
};
|
|
|
|
export default function LessonRow({ index, lesson, isActive, isLocked, onSelect }: LessonRowProps) {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className={cn(
|
|
"group h-auto w-full justify-start whitespace-normal rounded-2xl border p-5 text-left transition-all hover:bg-accent/50",
|
|
isActive
|
|
? "border-primary/60 bg-background shadow-sm ring-1 ring-primary/20"
|
|
: "border-border bg-background hover:border-border/80",
|
|
isLocked && "cursor-not-allowed opacity-60 hover:bg-transparent"
|
|
)}
|
|
onClick={isLocked ? undefined : onSelect}
|
|
type="button"
|
|
disabled={isLocked && !isActive}
|
|
>
|
|
<div className="flex w-full items-center gap-4">
|
|
<div
|
|
className={cn(
|
|
"flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-lg font-semibold transition-colors",
|
|
isActive ? "border-primary text-primary" : "border-input text-muted-foreground group-hover:border-primary/40 group-hover:text-foreground"
|
|
)}
|
|
>
|
|
{isLocked ? "L" : index + 1}
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1 space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
|
<Badge variant="outline" className={cn("rounded-full border-0 px-2.5 py-0.5 font-semibold capitalize", typeColors[lesson.type])}>
|
|
{lesson.type}
|
|
</Badge>
|
|
<span>{lesson.minutes} min</span>
|
|
{isLocked ? <span className="text-muted-foreground/70">Locked</span> : null}
|
|
{lesson.isPreview ? <span className="text-yellow-600 dark:text-yellow-400">Preview</span> : null}
|
|
</div>
|
|
<p className="truncate text-lg font-medium text-foreground md:text-2xl">{lesson.title}</p>
|
|
</div>
|
|
|
|
{isActive ? (
|
|
<div className="hidden h-20 w-36 overflow-hidden rounded-xl border border-border bg-muted md:block">
|
|
<div className="flex h-full items-center justify-center text-2xl text-muted-foreground/80">Play</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</Button>
|
|
);
|
|
}
|