feat: various UI updates

front/components/Pages/Courses/ActivityIndicators.tsx

@@ -0,0 +1,73 @@
+import ToolTip from '@components/UI/Tooltip/Tooltip'
+import { getUriWithOrg } from '@services/config/config'
+import Link from 'next/link'
+import React from 'react'
+
+
+interface Props {
+    course: any
+    orgslug: string
+    current_activity?: any
+}
+
+function ActivityIndicators(props: Props) {
+    const course = props.course
+    const orgslug = props.orgslug
+    const courseid = course.course.course_id.replace("course_", "")
+
+    const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
+    const black_activity_style = 'bg-black hover:bg-gray-700'
+    const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
+
+
+    function isActivityDone(activity: any) {
+        if (course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing") {
+            return true
+        }
+        return false
+    }
+
+    function isActivityCurrent(activity: any) {
+        let activityid = activity.id.replace("activity_", "")
+        if (props.current_activity && props.current_activity == activityid) {
+            return true
+        }
+        return false
+    }
+
+    function getActivityClass(activity: any) {
+        if (isActivityDone(activity)) {
+            return done_activity_style
+        }
+        if (isActivityCurrent(activity)) {
+            return current_activity_style
+        }
+        return black_activity_style
+    }
+
+
+    return (
+        <div className='grid grid-flow-col justify-stretch space-x-6'>
+            {course.chapters.map((chapter: any) => {
+                return (
+                    <>
+                        <div className='grid grid-flow-col justify-stretch space-x-2'>
+                            {chapter.activities.map((activity: any) => {
+                                return (
+                                    <ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
+                                        <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
+                                            <div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div>
+
+                                        </Link>
+                                    </ToolTip>
+                                );
+                            })}
+                        </div>
+                    </>
+                );
+            })}
+        </div>
+    )
+}
+
+export default ActivityIndicators