59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import {
|
|
CalendarIcon,
|
|
UserGroupIcon,
|
|
AcademicCapIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
import { CourseLevelLabel } from "@nice/common";
|
|
|
|
interface CourseHeaderProps {
|
|
title: string;
|
|
subTitle?: string;
|
|
thumbnail?: string;
|
|
level?: string;
|
|
numberOfStudents?: number;
|
|
publishedAt?: Date;
|
|
}
|
|
|
|
export const CourseHeader = ({
|
|
title,
|
|
subTitle,
|
|
thumbnail,
|
|
level,
|
|
numberOfStudents,
|
|
publishedAt,
|
|
}: CourseHeaderProps) => {
|
|
return (
|
|
<div className="relative">
|
|
{thumbnail && (
|
|
<div className="relative h-48 w-full">
|
|
<img src={thumbnail} alt={title} className="object-cover" />
|
|
</div>
|
|
)}
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-gray-900 ">{title}</h3>
|
|
{subTitle && <p className="mt-2 text-gray-600 ">{subTitle}</p>}
|
|
<div className="mt-4 flex items-center gap-4 text-sm text-gray-500 ">
|
|
{level && (
|
|
<div className="flex items-center gap-1">
|
|
<AcademicCapIcon className="h-4 w-4" />
|
|
<span>{CourseLevelLabel[level]}</span>
|
|
</div>
|
|
)}
|
|
{numberOfStudents !== undefined && (
|
|
<div className="flex items-center gap-1">
|
|
<UserGroupIcon className="h-4 w-4" />
|
|
<span>{numberOfStudents} 人学习中</span>
|
|
</div>
|
|
)}
|
|
{publishedAt && (
|
|
<div className="flex items-center gap-1">
|
|
<CalendarIcon className="h-4 w-4" />
|
|
<span>{publishedAt.toLocaleDateString()}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|