mdares/ACVE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

advance

Browse Source
This commit is contained in:
Marcelo
2026-02-17 00:07:00 +00:00
parent b7a86a2d1c
commit be4ca2ed78
92 changed files with 6850 additions and 1188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/LessonRow.tsx Normal file → Executable file
View File

@@ -1,4 +1,7 @@
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;
@@ -9,47 +12,54 @@ type LessonRowProps = {
};
const typeColors: Record<Lesson["type"], string> = {
video: "bg-[#ffecee] text-[#ca4d6f]",
reading: "bg-[#ecfbf4] text-[#2f9d73]",
interactive: "bg-[#eef4ff] text-[#6288da]",
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
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" : ""}`}
<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 items-center gap-4">
<div className="flex w-full 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"
}`}
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">
<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]}`}>
<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}
</span>
</Badge>
<span>{lesson.minutes} min</span>
{isLocked ? <span className="text-slate-400">Locked</span> : null}
{lesson.isPreview ? <span className="text-[#8a6b00]">Preview</span> : null}
{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 text-[#222a38] md:text-2xl">{lesson.title}</p>
<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-slate-200 bg-[#202020] md:block">
<div className="flex h-full items-center justify-center text-2xl text-white/80">Play</div>
<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>
</Button>
);
}