units,lesson as standalone

2026-09-27 00:12:54 +08:00 · 2026-07-10 11:45:02 +08:00
parent 182bd93d10
commit 01a2c63b06
60 changed files with 3217 additions and 606 deletions
@@ -0,0 +1,85 @@
+// LessonCard — grid card for a standalone Lesson. Shared by LessonsList.jsx and
+// Dashboard.jsx's "Featured Lessons" section. Mirrors UnitCard.jsx; a Lesson has
+// no lesson_count/quiz_id of its own — shows unit_count instead (how many Units
+// it's attached to).
+
+import { Timer, LockIcon, Layers } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+function formatDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h && m) return `${h}h ${m}m`;
+    if (h) return `${h}h`;
+    return `${m}m`;
+}
+
+export const LessonCard = ({ lesson, onViewDetails }) => {
+    const locked = lesson.is_locked;
+    const duration = formatDuration(lesson.duration_seconds);
+    const unitCount = Number(lesson.unit_count ?? 0);
+
+    return (
+        <div
+            className={cn(
+                "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
+                "hover:shadow-sm",
+                locked
+                    ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
+                    : "hover:bg-muted/60 dark:hover:border-blue-500"
+            )}
+            onClick={() => onViewDetails(lesson)}
+        >
+            <div className="flex flex-wrap gap-1.5">
+                {locked ? (
+                    <Badge variant="secondary">
+                        <LockIcon className="size-3" /> Locked
+                    </Badge>
+                ) : unitCount > 0 ? (
+                    <Badge variant="outline"><Layers className="size-3" /> In {unitCount} unit{unitCount === 1 ? "" : "s"}</Badge>
+                ) : (
+                    <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
+                )}
+            </div>
+
+            <div className="flex flex-col gap-1">
+                <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
+                    {lesson.title}
+                </h1>
+                {lesson.description && (
+                    <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
+                        {lesson.description}
+                    </p>
+                )}
+            </div>
+
+            <div className="flex items-center justify-between pt-2 mt-auto border-t">
+                <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
+                    <div className="flex items-center gap-1">
+                        <Timer /> {duration ?? "—"}
+                    </div>
+                </div>
+                {locked && (
+                    <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const LessonCardSkeleton = () => (
+    <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
+        <div className="flex gap-1.5">
+            <Skeleton className="h-5 w-20 rounded-full" />
+        </div>
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+        <div className="pt-2 mt-auto border-t">
+            <Skeleton className="h-4 w-24" />
+        </div>
+    </div>
+);