From 1fc791473ec71098c079bcd7d8639bd32cb0d332 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Tue, 13 May 2025 19:39:35 +0200
Subject: [PATCH] feat: add breadcrumbs to course and activity page

---
 .../activity/[activityid]/activity.tsx        |  6 ++++
 .../(withmenu)/course/[courseuuid]/course.tsx |  7 +++-
 .../Pages/Activity/ActivityBreadcrumbs.tsx    | 35 +++++++++++++++++++
 .../Pages/Courses/CourseBreadcrumbs.tsx       | 30 ++++++++++++++++
 4 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/components/Pages/Activity/ActivityBreadcrumbs.tsx
 create mode 100644 apps/web/components/Pages/Courses/CourseBreadcrumbs.tsx

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
index c629dbf3..2095ee8e 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
@@ -34,6 +34,7 @@ import ActivityChapterDropdown from '@components/Pages/Activity/ActivityChapterD
 import FixedActivitySecondaryBar from '@components/Pages/Activity/FixedActivitySecondaryBar'
 import CourseEndView from '@components/Pages/Activity/CourseEndView'
 import { motion, AnimatePresence } from 'framer-motion'
+import ActivityBreadcrumbs from '@components/Pages/Activity/ActivityBreadcrumbs'
 
 interface ActivityClientProps {
   activityid: string
@@ -444,6 +445,11 @@ function ActivityClient(props: ActivityClientProps) {
               ) : (
                 <div className="space-y-4 pt-0">
                   <div className="pt-2">
+                    <ActivityBreadcrumbs 
+                      course={course}
+                      activity={activity}
+                      orgslug={orgslug}
+                    />
                     <div className="space-y-4 pb-4 activity-info-section">
                       <div className="flex justify-between items-center">
                         <div className="flex space-x-6">
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
index 41dfbbb1..89ceccc7 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
@@ -17,6 +17,7 @@ import { useMediaQuery } from 'usehooks-ts'
 import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
 import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
 import CourseAuthors from '@components/Objects/Courses/CourseAuthors/CourseAuthors'
+import CourseBreadcrumbs from '@components/Pages/Courses/CourseBreadcrumbs'
 
 const CourseClient = (props: any) => {
   const [learnings, setLearnings] = useState<any>([])
@@ -127,7 +128,11 @@ const CourseClient = (props: any) => {
       ) : (
         <>
           <GeneralWrapperStyled>
-            <div className="pb-2 pt-5 flex flex-col md:flex-row justify-between items-start md:items-center">
+            <CourseBreadcrumbs 
+              course={course}
+              orgslug={orgslug}
+            />
+            <div className="pb-2 pt-3 flex flex-col md:flex-row justify-between items-start md:items-center">
               <div>
                 <p className="text-md font-bold text-gray-400 pb-2">Course</p>
                 <h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
diff --git a/apps/web/components/Pages/Activity/ActivityBreadcrumbs.tsx b/apps/web/components/Pages/Activity/ActivityBreadcrumbs.tsx
new file mode 100644
index 00000000..8cc07c7d
--- /dev/null
+++ b/apps/web/components/Pages/Activity/ActivityBreadcrumbs.tsx
@@ -0,0 +1,35 @@
+import { Book, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { getUriWithOrg } from '@services/config/config'
+import React from 'react'
+
+interface ActivityBreadcrumbsProps {
+  course: any
+  activity: any
+  orgslug: string
+}
+
+export default function ActivityBreadcrumbs({ course, activity, orgslug }: ActivityBreadcrumbsProps) {
+  const cleanCourseUuid = course.course_uuid?.replace('course_', '')
+
+  return (
+    <div className="text-gray-400 tracking-tight font-medium text-sm flex space-x-1 mb-4">
+      <div className="flex items-center space-x-1">
+        <div className="flex space-x-2 items-center">
+          <Book className="text-gray" size={14} />
+          <Link href={getUriWithOrg(orgslug, '') + `/courses`}>
+            Courses
+          </Link>
+        </div>
+        <ChevronRight size={14} />
+        <Link href={getUriWithOrg(orgslug, '') + `/course/${cleanCourseUuid}`}>
+          {course.name}
+        </Link>
+        <ChevronRight size={14} />
+        <div className="first-letter:uppercase">
+          {activity.name}
+        </div>
+      </div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/apps/web/components/Pages/Courses/CourseBreadcrumbs.tsx b/apps/web/components/Pages/Courses/CourseBreadcrumbs.tsx
new file mode 100644
index 00000000..387e91ae
--- /dev/null
+++ b/apps/web/components/Pages/Courses/CourseBreadcrumbs.tsx
@@ -0,0 +1,30 @@
+import { Book, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { getUriWithOrg } from '@services/config/config'
+import React from 'react'
+
+interface CourseBreadcrumbsProps {
+  course: any
+  orgslug: string
+}
+
+export default function CourseBreadcrumbs({ course, orgslug }: CourseBreadcrumbsProps) {
+  const cleanCourseUuid = course.course_uuid?.replace('course_', '')
+
+  return (
+    <div className="text-gray-400 tracking-tight font-medium text-sm flex space-x-1 pt-2">
+      <div className="flex items-center space-x-1">
+        <div className="flex space-x-2 items-center">
+          <Book className="text-gray" size={14} />
+          <Link href={getUriWithOrg(orgslug, '') + `/courses`}>
+            Courses
+          </Link>
+        </div>
+        <ChevronRight size={14} />
+        <div className="first-letter:uppercase">
+          {course.name}
+        </div>
+      </div>
+    </div>
+  )
+} 
\ No newline at end of file