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: minor course page ui changes

Browse source
This commit is contained in:
swve 2025-03-29 18:37:53 +01:00
parent 04c5b845fb
commit 1bbb0269a3
1 changed files with 154 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,7 @@ import CourseActionsMobile from '@components/Objects/Courses/CourseActions/Cours
const CourseClient = (props: any) => { const CourseClient = (props: any) => {
const [learnings, setLearnings] = useState<any>([]) const [learnings, setLearnings] = useState<any>([])
const [expandedChapters, setExpandedChapters] = useState<{[key: string]: boolean}>({})
const courseuuid = props.courseuuid const courseuuid = props.courseuuid
const orgslug = props.orgslug const orgslug = props.orgslug
const course = props.course const course = props.course
@ -112,8 +113,8 @@ const CourseClient = (props: any) => {
<div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10"> <div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
<div className="course_metadata_left w-full md:basis-3/4 space-y-2"> <div className="course_metadata_left w-full md:basis-3/4 space-y-2">
<h2 className="py-3 text-2xl font-bold">About</h2> <h2 className="py-3 text-2xl font-bold">About</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden"> <div className="">
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p> <p className="py-5 whitespace-pre-wrap">{course.about}</p>
</div> </div>
{learnings.length > 0 && learnings[0]?.text !== 'null' && ( {learnings.length > 0 && learnings[0]?.text !== 'null' && (
@ -164,14 +165,32 @@ const CourseClient = (props: any) => {
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2> <h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden"> <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
{course.chapters.map((chapter: any) => { {course.chapters.map((chapter: any) => {
const isExpanded = expandedChapters[chapter.chapter_uuid] ?? true; // Default to expanded
return ( return (
<div key={chapter.chapter_uuid || `chapter-${chapter.name}`} className=""> <div key={chapter.chapter_uuid || `chapter-${chapter.name}`} className="">
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center"> <div
className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center cursor-pointer hover:bg-neutral-100 transition-colors"
onClick={() => setExpandedChapters(prev => ({
...prev,
[chapter.chapter_uuid]: !isExpanded
}))}
>
<h3 className="grow mr-3 break-words">{chapter.name}</h3> <h3 className="grow mr-3 break-words">{chapter.name}</h3>
<div className="flex items-center space-x-3">
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap shrink-0"> <p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap shrink-0">
{chapter.activities.length} Activities {chapter.activities.length} Activities
</p> </p>
<svg
className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</div> </div>
</div>
<div className={`py-3 transition-all duration-200 ${isExpanded ? 'block' : 'hidden'}`}>
<div className="py-3"> <div className="py-3">
{chapter.activities.map((activity: any) => { {chapter.activities.map((activity: any) => {
return ( return (
@ -324,6 +343,7 @@ const CourseClient = (props: any) => {
})} })}
</div> </div>
</div> </div>
</div>
) )
})} })}
</div> </div>