Add lesson progress tracking
- Toggle lesson completion via server action (LessonProgress table) - "Отметить как пройденный" button on lesson page, turns accent when done - Course sidebar: progress bar, checkmarks on completed lessons, X/Y counter per module - Dashboard: progress bar on each course card with completion percentage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { useTransition } from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import { toggleLessonProgress } from "@/app/(student)/courses/[slug]/lessons/[lessonId]/actions";
|
||||
|
||||
export function LessonCompleteButton({
|
||||
lessonId,
|
||||
slug,
|
||||
isCompleted,
|
||||
}: {
|
||||
lessonId: string;
|
||||
slug: string;
|
||||
isCompleted: boolean;
|
||||
}) {
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => startTransition(() => toggleLessonProgress(lessonId, slug))}
|
||||
disabled={pending}
|
||||
className={`btn-aubade ${isCompleted ? "btn-aubade-accent" : ""} flex items-center gap-2 px-5 py-2.5 text-sm`}
|
||||
style={{ opacity: pending ? 0.6 : 1 }}
|
||||
>
|
||||
<Check size={15} strokeWidth={isCompleted ? 3 : 2} />
|
||||
{pending ? "..." : isCompleted ? "Пройдено" : "Отметить как пройденный"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user