44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
import Link from "next/link";
|
|
import type { Course } from "@/types/course";
|
|
import ProgressBar from "@/components/ProgressBar";
|
|
|
|
type CourseCardProps = {
|
|
course: Course;
|
|
progress?: number;
|
|
};
|
|
|
|
export default function CourseCard({ course, progress = 0 }: CourseCardProps) {
|
|
return (
|
|
<Link
|
|
href={`/courses/${course.slug}`}
|
|
className="group flex h-full flex-col justify-between rounded-2xl border border-slate-300 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-brand/60"
|
|
>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="rounded-full bg-[#ead7a0] px-3 py-1 text-xs font-semibold text-[#8a6b00]">{course.level}</span>
|
|
<span className="text-sm font-semibold text-slate-700">Rating {course.rating.toFixed(1)}</span>
|
|
</div>
|
|
<h3 className="text-2xl leading-tight text-[#212937] md:text-4xl">{course.title}</h3>
|
|
<p className="text-base text-slate-600 md:text-lg">{course.summary}</p>
|
|
</div>
|
|
|
|
<div className="mt-5 border-t border-slate-200 pt-4 text-base text-slate-600 md:text-lg">
|
|
{progress > 0 ? (
|
|
<div className="mb-4">
|
|
<ProgressBar value={progress} label={`Progress ${progress}%`} />
|
|
</div>
|
|
) : null}
|
|
<div className="mb-1 flex items-center justify-between">
|
|
<span>{course.weeks} weeks</span>
|
|
<span>{course.lessonsCount} lessons</span>
|
|
</div>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<span>{course.students.toLocaleString()} students</span>
|
|
<span className="text-brand transition-transform group-hover:translate-x-1">{">"}</span>
|
|
</div>
|
|
<div className="text-sm font-semibold text-slate-700 md:text-base">By {course.instructor}</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|