mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: redesign some parts of course page
This commit is contained in:
swve
parent
805c27d6ba
commit
be7b1ee5b5
1 changed files with 78 additions and 21 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue