admins
d0c8c6dd53
- 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>
30 lines
877 B
TypeScript
30 lines
877 B
TypeScript
"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>
|
|
);
|
|
}
|