rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Make the chapter icons clickable in the navigation bar

Browse source
This commit is contained in:
swve 2025-06-18 19:36:49 +02:00
parent 35b96c4473
commit e239eb5a31
1 changed files with 27 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/web/components/Pages/Courses/ActivityIndicators.tsx
View file

@ -235,7 +235,13 @@ function ActivityIndicators(props: Props) {
{course.chapters.map((chapter: any, chapterIndex: number) => { {course.chapters.map((chapter: any, chapterIndex: number) => {
const completedActivities = getChapterProgress(chapter.activities); const completedActivities = getChapterProgress(chapter.activities);
const isChapterComplete = completedActivities === chapter.activities.length; const isChapterComplete = completedActivities === chapter.activities.length;
const firstActivity = chapter.activities[0];
const firstActivityId = firstActivity?.activity_uuid?.replace('activity_', '');
const chapterLinkHref =
firstActivityId
? getUriWithOrg(orgslug, '') + `/course/${courseid}/activity/${firstActivityId}`
: undefined;
return ( return (
<React.Fragment key={chapter.id}> <React.Fragment key={chapter.id}>
<ToolTip <ToolTip
@ -250,15 +256,27 @@ function ActivityIndicators(props: Props) {
/> />
} }
> >
<div className="mx-2 h-[20px] flex items-center cursor-help"> {chapterLinkHref ? (
<div className={`w-[20px] h-[20px] rounded-full flex items-center justify-center text-xs font-medium transition-colors ${ <Link href={chapterLinkHref} prefetch={false} className="mx-2 h-[20px] flex items-center cursor-pointer focus:outline-none">
isChapterComplete <div className={`w-[20px] h-[20px] rounded-full flex items-center justify-center text-xs font-medium transition-colors ${
? 'bg-teal-600 text-white' isChapterComplete
: 'bg-gray-100 text-gray-600' ? 'bg-teal-600 text-white'
}`}> : 'bg-gray-100 text-gray-600'
{chapterIndex + 1} }`}>
{chapterIndex + 1}
</div>
</Link>
) : (
<div className="mx-2 h-[20px] flex items-center cursor-not-allowed">
<div className={`w-[20px] h-[20px] rounded-full flex items-center justify-center text-xs font-medium transition-colors ${
isChapterComplete
? 'bg-teal-600 text-white'
: 'bg-gray-100 text-gray-600'
}`}>
{chapterIndex + 1}
</div>
</div> </div>
</div> )}
</ToolTip> </ToolTip>
<div className="flex-1 flex items-center"> <div className="flex-1 flex items-center">
{chapter.activities.map((activity: any) => { {chapter.activities.map((activity: any) => {