dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add collapsible timeline accordion to bootcamp curriculum preview

Browse Source 
- Added state for expanded lesson chapters (expandedLessonChapters)
- Created toggleLessonChapters helper function
- Fixed formatChapterTime to support hours (1:11:11 instead of 111:11)
- Wrapped lesson timeline in Collapsible component with Clock icon
- Timeline header shows "N timeline items" count
- All timelines expanded by default on page load
- Users can collapse/expand to focus on one lesson at a time
- ChevronDown/ChevronRight icons indicate expanded/collapsed state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-01-04 13:25:45 +07:00
parent d126f2d9c6
commit 8d40a8cb29
1 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/ProductDetail.tsx
View File

@@ -68,6 +68,7 @@ export default function ProductDetail() {
const [hasAccess, setHasAccess] = useState(false);
const [checkingAccess, setCheckingAccess] = useState(true);
const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
const [expandedLessonChapters, setExpandedLessonChapters] = useState<Set<string>>(new Set());
const [userReview, setUserReview] = useState<UserReview | null>(null);
const [reviewModalOpen, setReviewModalOpen] = useState(false);
const { addItem, items } = useCart();
@@ -138,6 +139,13 @@ export default function ProductDetail() {
if (sorted.length > 0) {
setExpandedModules(new Set([sorted[0].id]));
}
// Expand all lessons with chapters by default
const lessonsWithChapters = sorted
.flatMap(m => m.lessons)
.filter(l => l.chapters && l.chapters.length > 0)
.map(l => l.id);
setExpandedLessonChapters(new Set(lessonsWithChapters));
}
};
@@ -222,8 +230,13 @@ export default function ProductDetail() {
const isInCart = product ? items.some(item => item.id === product.id) : false;
const formatChapterTime = (seconds: number) => {
const mins = Math.floor(seconds / 60);
const hours = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = Math.floor(seconds % 60);
if (hours > 0) {
return `${hours}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}
return `${mins}:${String(secs).padStart(2, '0')}`;
};
@@ -283,6 +296,16 @@ export default function ProductDetail() {
setExpandedModules(newSet);
};
const toggleLessonChapters = (lessonId: string) => {
const newSet = new Set(expandedLessonChapters);
if (newSet.has(lessonId)) {
newSet.delete(lessonId);
} else {
newSet.add(lessonId);
}
setExpandedLessonChapters(newSet);
};
if (loading) {
return (<AppLayout><div className="container mx-auto px-4 py-8"><Skeleton className="h-10 w-1/2 mb-4" /><Skeleton className="h-6 w-1/4 mb-8" /><Skeleton className="h-64 w-full" /></div></AppLayout>);
}
@@ -421,21 +444,39 @@ export default function ProductDetail() {
{/* Lesson chapters (if any) */}
{lesson.chapters && lesson.chapters.length > 0 && (
<div className="ml-5 space-y-1">
{lesson.chapters.map((chapter, chapterIndex) => (
<div
key={chapterIndex}
className={`flex items-start gap-2 py-1 px-2 text-xs text-muted-foreground rounded transition-colors cursor-not-allowed opacity-60${isLastTimelineItem(lesson.chapters.length, chapterIndex) ? ' border-b-2 border-[#dedede] rounded-none' : ''}`}
title="Beli bootcamp untuk mengakses materi ini"
>
<span className="font-mono w-10 text-center">
{formatChapterTime(chapter.time)}
</span>
<span className="flex-1" dangerouslySetInnerHTML={{ __html: chapter.title }} />
<Lock className="w-3 h-3 flex-shrink-0" />
<Collapsible
open={expandedLessonChapters.has(lesson.id)}
onOpenChange={() => toggleLessonChapters(lesson.id)}
>
<CollapsibleTrigger className="flex items-center gap-2 ml-5 py-1 px-2 text-xs text-muted-foreground hover:bg-accent rounded transition-colors w-full">
<Clock className="w-3 h-3" />
<span className="flex-1 text-left">
{lesson.chapters.length} timeline item{lesson.chapters.length > 1 ? 's' : ''}
</span>
{expandedLessonChapters.has(lesson.id) ? (
<ChevronDown className="w-3 h-3" />
) : (
<ChevronRight className="w-3 h-3" />
)}
</CollapsibleTrigger>
<CollapsibleContent>
<div className="ml-5 space-y-1">
{lesson.chapters.map((chapter, chapterIndex) => (
<div
key={chapterIndex}
className={`flex items-start gap-2 py-1 px-2 text-xs text-muted-foreground rounded transition-colors cursor-not-allowed opacity-60${isLastTimelineItem(lesson.chapters.length, chapterIndex) ? ' border-b-2 border-[#dedede] rounded-none' : ''}`}
title="Beli bootcamp untuk mengakses materi ini"
>
<span className="font-mono w-10 text-center">
{formatChapterTime(chapter.time)}
</span>
<span className="flex-1" dangerouslySetInnerHTML={{ __html: chapter.title }} />
<Lock className="w-3 h-3 flex-shrink-0" />
</div>
))}
</div>
))}
</div>
</CollapsibleContent>
</Collapsible>
)}
</div>
))}