59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
|
import { CalendarIcon, UserGroupIcon, AcademicCapIcon } from '@heroicons/react/24/outline';
|
||
|
|
|
||
|
|
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 dark:text-white">{title}</h3>
|
||
|
|
{subTitle && (
|
||
|
|
<p className="mt-2 text-gray-600 dark:text-gray-300">{subTitle}</p>
|
||
|
|
)}
|
||
|
|
<div className="mt-4 flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||
|
|
{level && (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<AcademicCapIcon className="h-4 w-4" />
|
||
|
|
<span>{level}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{numberOfStudents !== undefined && (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<UserGroupIcon className="h-4 w-4" />
|
||
|
|
<span>{numberOfStudents} students</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{publishedAt && (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<CalendarIcon className="h-4 w-4" />
|
||
|
|
<span>{publishedAt.toLocaleDateString()}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|