From be7b1ee5b5c539f77a7607557999ead67b2beaae Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Thu, 12 Oct 2023 20:03:06 +0200
Subject: [PATCH] feat: redesign some parts of course page

---
 .../(withmenu)/course/[courseid]/course.tsx   | 99 +++++++++++++++----
 1 file changed, 78 insertions(+), 21 deletions(-)

diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
index a39c6865..dcd32aac 100644
--- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
+++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
@@ -1,18 +1,15 @@
 "use client";
-import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
 import { removeCourse, startCourse } from "@services/courses/activity";
 import Link from "next/link";
 import React, { use } from "react";
-import styled from "styled-components";
-import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
-import useSWR, { mutate } from "swr";
-import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
+import { getUriWithOrg } from "@services/config/config";
 import PageLoading from "@components/Objects/Loaders/PageLoading";
 import { revalidateTags } from "@services/utils/ts/requests";
 import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators";
 import { useRouter } from "next/navigation";
 import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
 import { getCourseThumbnailMediaDirectory } from "@services/media/media";
+import { ArrowRight, File, Sparkles, Star, Video } from "lucide-react";
 
 const CourseClient = (props: any) => {
   const courseid = props.courseid;
@@ -36,9 +33,6 @@ const CourseClient = (props: any) => {
     // Mutate course
     await revalidateTags(['courses'], orgslug);
     router.refresh();
-
-    // refresh page (FIX for Next.js BUG)
-    //window.location.reload();
   }
 
 
@@ -57,7 +51,6 @@ const CourseClient = (props: any) => {
 
 
           <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[300px] bg-cover bg-center mb-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(course.course.org_id, course.course.course_id, course.course.thumbnail)})` }}>
-
           </div>
 
           <ActivityIndicators course_id={props.course.course.course_id} orgslug={orgslug} course={course} />
@@ -70,38 +63,102 @@ const CourseClient = (props: any) => {
               </StyledBox>
 
               <h2 className="py-3 text-2xl font-bold">What you will learn</h2>
-              <StyledBox>
-
-                <p className="py-3">{course.learnings == ![] ? "no data" : course.learnings}</p>
-              </StyledBox>
+              <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
+                {course.course.learnings.map((learning: any) => {
+                  return (
+                    <div key={learning}
+                      className="flex space-x-2 items-center font-semibold text-gray-500 capitalize">
+                      <div className="bg-gray-100 px-2 py-2 rounded-full">
+                        <Star className="text-gray-400" size={13} />
+                      </div>
+                      <p>{learning}</p>
+                    </div>
+                  );
+                }
+                )}
+              </div>
 
               <h2 className="py-3 text-2xl font-bold">Course Lessons</h2>
-              <StyledBox>
+              <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) => {
                   return (
                     <div
                       key={chapter}
-                      className="py-3"
+                      className=""
                     >
-                      <h3 className="text-lg">{chapter.name}</h3>
+                      <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">
+                        <h3 className="grow">{chapter.name}</h3>
+                        <p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full ">
+                          {chapter.activities.length} Activities
+                        </p>
+                      </div>
                       <div
                         className="py-3"
                       >{chapter.activities.map((activity: any) => {
                         return (
                           <>
                             <p className="flex text-md">
-                              {activity.name}
-                              <Link className="pl-3" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
-                                <EyeOpenIcon />
-                              </Link>{" "}
+
                             </p>
+                            <div className="flex space-x-1 py-2 px-4 items-center">
+                              <div className="courseicon items-center flex space-x-2 text-slate-400">
+                                {activity.type === "dynamic" &&
+                                  <div className="bg-gray-100 px-2 py-2 rounded-full">
+                                    <Sparkles className="text-gray-400" size={13} />
+                                  </div>
+                                }
+                                {activity.type === "video" &&
+                                  <div className="bg-gray-100 px-2 py-2 rounded-full">
+                                    <Video className="text-gray-400" size={13} />
+                                  </div>
+                                }
+                                {activity.type === "documentpdf" &&
+                                  <div className="bg-gray-100 px-2 py-2 rounded-full">
+                                    <File className="text-gray-400" size={13} />
+                                  </div>
+                                }
+
+                              </div>
+                              <Link className="flex font-semibold grow pl-2 text-slate-500" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
+                                <p>{activity.name}</p>
+                              </Link>
+                              <div className="flex ">
+                                {activity.type === "dynamic" &&
+                                  <>
+                                    <Link className="flex grow pl-2 text-gray-500" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
+                                      <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
+                                        <p>Page</p>
+                                        <ArrowRight size={13} /></div>
+                                    </Link>
+                                  </>
+                                }
+                                {activity.type === "video" &&
+                                  <>
+                                    <Link className="flex grow pl-2 text-gray-500" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
+                                      <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
+                                        <p>Video</p>
+                                        <ArrowRight size={13} /></div>
+                                    </Link>
+                                  </>
+                                }
+                                {activity.type === "documentpdf" &&
+                                  <>
+                                    <Link className="flex grow pl-2 text-gray-500" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
+                                      <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
+                                        <p>Document</p>
+                                        <ArrowRight size={13} /></div>
+                                    </Link>
+                                  </>
+                                }
+                              </div>
+                            </div>
                           </>
                         );
                       })}</div>
                     </div>
                   );
                 })}
-              </StyledBox>
+              </div>
 
             </div>
             <div className="course_metadata_right w-64 flex items-center ml-10 h-28 p-3 bg-white shadow-sm justify-center ring-1 ring-inset ring-gray-400/10 rounded-lg transition-all">