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: add breadcrumbs to course and activity page

Browse source
This commit is contained in:
swve 2025-05-13 19:39:35 +02:00
parent bf94855d0c
commit 1fc791473e
4 changed files with 77 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -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">

7
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
View file

@ -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>

35
apps/web/components/Pages/Activity/ActivityBreadcrumbs.tsx Normal file
View file

@ -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>
)
}

30
apps/web/components/Pages/Courses/CourseBreadcrumbs.tsx Normal file
View file

@ -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>
)
}