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: redesign trail + add quit course button

Browse source
This commit is contained in:
swve 2023-06-25 17:30:04 +02:00
parent 6b0df500ef
commit bfd3f07837
8 changed files with 133 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

60
front/components/Pages/Trail/TrailCourseElement.tsx Normal file
View file

@ -0,0 +1,60 @@
'use client';
import { getAPIUrl, getBackendUrl, getUriWithOrg } from '@services/config/config';
import { removeCourse } from '@services/courses/activity';
import { revalidateTags } from '@services/utils/ts/requests';
import Link from 'next/link';
import { mutate } from 'swr';
interface TrailCourseElementProps {
course: any
orgslug: string
}
function TrailCourseElement(props: TrailCourseElementProps) {
const courseid = props.course.course_id.replace("course_", "")
const course = props.course
async function quitCourse(course_id: string) {
// Close activity
let activity = await removeCourse(course_id, props.orgslug);
// Mutate course
revalidateTags(['courses']);
// Mutate
mutate(`${getAPIUrl()}trail/org_slug/${props.orgslug}/trail`);
}
return (
<div className='trailcoursebox flex p-3 bg-white rounded-xl' style={{ boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}>
<Link href={getUriWithOrg(props.orgslug, "/course/" + courseid)}>
<div className="course_tumbnail inset-0 ring-1 ring-inset ring-black/10 rounded-lg relative h-[50px] w-[72px] bg-cover bg-center" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${props.course.course_object.thumbnail})`, boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}></div>
</Link>
<div className="course_meta pl-5 flex-grow space-y-1">
<div className="course_top">
<div className="course_info flex">
<div className="course_basic flex flex-col flex-end -space-y-2">
<p className='p-0 font-bold text-sm text-gray-700'>Course</p>
<div className="course_progress flex items-center space-x-2">
<h2 className='font-bold text-xl'>{course.course_object.name}</h2>
<div className='bg-slate-300 rounded-full w-[10px] h-[5px]'></div>
<h2>{course.progress}%</h2>
</div>
</div>
<div className="course_actions flex-grow flex flex-row-reverse">
<button onClick={() => quitCourse(course.course_id)} className="bg-red-200 text-red-700 hover:bg-red-300 rounded-full text-xs h-5 px-2 font-bold">Quit Course</button>
</div>
</div>
</div>
<div className="course_progress indicator w-full">
<div className="w-full bg-gray-200 rounded-full h-1.5 ">
<div className={`bg-teal-600 h-1.5 rounded-full`} style={{ width: `${course.progress}%` }} ></div>
</div>
</div>
</div>
</div>
)
}
export default TrailCourseElement