mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
@@ -0,0 +1,251 @@
|
||||
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
House, Timer, Layers, LockIcon, SendHorizonal, CheckCheck, CheckCircle2, Circle,
|
||||
FileQuestion, Hourglass, Zap, ClipboardList,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect } from "react";
|
||||
import { useLibrary } from "@/contexts/ClientLibraryContext";
|
||||
import { useClientTiers } from "@/contexts/ClientTiersProvider";
|
||||
import { PageMeta } from "@/contexts/MetadataContext";
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function formatDuration(seconds = 0) {
|
||||
if (!seconds) return null;
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
if (h > 0) return `${h}hr ${m}min`;
|
||||
return `${m}min`;
|
||||
}
|
||||
|
||||
// ─── Content card (single unit — lessons + quiz, no multi-unit spine) ─────────
|
||||
|
||||
const UnitContentCard = ({ unitDetail, onLessonClick, onQuizClick }) => {
|
||||
const lessons = unitDetail.lessons ?? [];
|
||||
const quiz = unitDetail.quiz ?? null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="rounded-xl border bg-card"
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, ease: "easeOut" }}
|
||||
>
|
||||
<div className="px-4 py-4 border-b flex flex-col gap-2">
|
||||
<div className="[&_svg]:size-4 text-md text-muted-foreground flex items-center gap-4">
|
||||
{lessons.length > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Layers /> {lessons.length} {lessons.length === 1 ? "Lesson" : "Lessons"}
|
||||
</div>
|
||||
)}
|
||||
{unitDetail.duration_seconds > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Timer /> {formatDuration(unitDetail.duration_seconds)}
|
||||
</div>
|
||||
)}
|
||||
{quiz && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<FileQuestion /> Quiz
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-1.5">
|
||||
{lessons.map((lesson) => (
|
||||
<div
|
||||
key={lesson.lesson_id}
|
||||
className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-slate-200 dark:hover:bg-blue-500 transition-colors cursor-pointer"
|
||||
onClick={() => onLessonClick(lesson)}
|
||||
>
|
||||
<div className="flex items-center gap-3 select-none min-w-0">
|
||||
{lesson.status === "completed"
|
||||
? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
|
||||
: <Circle className="size-4 text-muted-foreground/40 shrink-0" />
|
||||
}
|
||||
<span className="text-md text-card-foreground truncate">{lesson.title}</span>
|
||||
</div>
|
||||
{lesson.duration_seconds > 0 && (
|
||||
<span className="text-sm shrink-0 ml-2">{formatDuration(lesson.duration_seconds)}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{quiz && (
|
||||
<div
|
||||
className="flex items-center justify-between py-2 px-3 mt-1 rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/60 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors cursor-pointer"
|
||||
onClick={() => onQuizClick()}
|
||||
>
|
||||
<div className="flex items-center gap-3 select-none min-w-0">
|
||||
{quiz.has_passed
|
||||
? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
|
||||
: <ClipboardList className="size-4 text-blue-500 shrink-0" />
|
||||
}
|
||||
<span className="text-sm font-medium text-blue-700 dark:text-blue-300 truncate">{quiz.title || "Quiz"}</span>
|
||||
</div>
|
||||
<Badge className={cn(
|
||||
"shrink-0 ml-2 text-[10px]",
|
||||
quiz.has_passed
|
||||
? "bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700"
|
||||
: "bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700"
|
||||
)}>
|
||||
{quiz.has_passed ? "Passed" : "Quiz"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Unit Details ───────────────────────────────────────────────────────────
|
||||
|
||||
const UnitDetails = () => {
|
||||
const { uuid } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { getUnitDetail, unitDetail, unitDetailLoading, unitBlocked, unitBlockedInfo, resetUnitDetail } = useLibrary();
|
||||
const { tierMap, getTierCategories } = useClientTiers();
|
||||
|
||||
const hasCompleted = !!unitDetail?.is_completed;
|
||||
const contentNotReady = !unitDetail?.duration_seconds;
|
||||
|
||||
useEffect(() => {
|
||||
getTierCategories();
|
||||
getUnitDetail(uuid);
|
||||
return () => resetUnitDetail();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [uuid]);
|
||||
|
||||
const items = [
|
||||
{ label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
|
||||
{ label: "Units", to: `/units` },
|
||||
{ label: unitDetail?.title ?? "Unit" },
|
||||
];
|
||||
|
||||
// ── Deep-link to a locked unit — inline blocked panel, not a redirect ────
|
||||
if (unitBlocked) {
|
||||
const course = unitBlockedInfo?.course;
|
||||
const tier = course?.subscription ? tierMap[course.subscription] : null;
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-6 py-32 text-center px-4">
|
||||
<div className="h-16 w-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
|
||||
<LockIcon className="size-7 text-amber-500" />
|
||||
</div>
|
||||
<div className="space-y-2 max-w-sm">
|
||||
<h2 className="text-xl font-semibold">Premium / Exclusive Content</h2>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{course
|
||||
? `This unit is part of "${course.title}"${tier?.name ? ` (${tier.name} plan)` : ""}. Upgrade your plan or view the course to unlock it.`
|
||||
: "Upgrade your plan to access this unit."}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Button onClick={() => navigate('/plans')} className="gap-1.5">
|
||||
<Zap className="size-4" /> View Available Plans
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground">Already subscribed? Your plan may not cover this tier.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (unitDetailLoading) {
|
||||
return (
|
||||
<div className="my-17 p-8 lg:container lg:mx-auto space-y-4">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-10 w-2/3" />
|
||||
<Skeleton className="h-5 w-full max-w-2xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleLessonClick = (lesson) => {
|
||||
navigate(`/units/${uuid}/read`, { state: { lessonId: lesson.lesson_id } });
|
||||
};
|
||||
const handleQuizClick = () => {
|
||||
navigate(`/units/${uuid}/read`, { state: { quizId: true } });
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageMeta title={unitDetail ? `${unitDetail.title} - STARR` : undefined} description={unitDetail?.description} />
|
||||
<div className="my-17">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="flex flex-col gap-6">
|
||||
|
||||
{/* Hero */}
|
||||
<div className="bg-primary dark:bg-accent/50">
|
||||
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-6 xs:py-6 lg:px-4 lg:py-16">
|
||||
<AppBreadcrumb
|
||||
color={{ link: { color: "text-white" }, page: { color: "text-white" } }}
|
||||
items={items}
|
||||
/>
|
||||
<div className="flex lg:flex-row items-start justify-between w-full text-white">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h1 className="font-bold xs:text-2xl lg:text-4xl">{unitDetail?.title ?? "Unit"}</h1>
|
||||
<p className="max-w-2xl xs:text-sm lg:text-lg">{unitDetail?.description ?? ""}</p>
|
||||
{unitDetail?.duration_seconds > 0 && (
|
||||
<div className="[&_svg]:size-4 flex gap-1.5 items-center">
|
||||
<Timer />
|
||||
{formatDuration(unitDetail.duration_seconds)}
|
||||
</div>
|
||||
)}
|
||||
<div className="w-fit">
|
||||
{contentNotReady ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
|
||||
<Hourglass className="size-4 shrink-0" />
|
||||
This unit is currently being prepared. Please check back later.
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
className="w-fit bg-blue-500"
|
||||
onClick={() => navigate(`/units/${uuid}/read`)}
|
||||
>
|
||||
{hasCompleted
|
||||
? <><CheckCheck /> Start Again</>
|
||||
: <><SendHorizonal /> Start Learning</>
|
||||
}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-3 xs:-mt-5 lg:-mt-0">
|
||||
<div className="flex flex-col gap-8 max-w-3xl">
|
||||
<div className="space-y-4">
|
||||
<div className="font-bold text-2xl">About this unit</div>
|
||||
<div className="space-y-4 text-muted-foreground lg:text-lg">
|
||||
<p>{unitDetail?.description ?? ""}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{unitDetail && !contentNotReady && (
|
||||
<div className="space-y-4">
|
||||
<div className="font-bold text-2xl">Unit content</div>
|
||||
<UnitContentCard
|
||||
unitDetail={unitDetail}
|
||||
onLessonClick={handleLessonClick}
|
||||
onQuizClick={handleQuizClick}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UnitDetails;
|
||||
Reference in New Issue
Block a user