69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import RatingStars from '@/components/rating-stars';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import courseLanguages from '@/data/course-languages';
|
|
import { getCourseDuration } from '@/lib/utils';
|
|
import { SharedData } from '@/types/global';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { Clock, GraduationCap, Languages, Users } from 'lucide-react';
|
|
|
|
const CourseHeader = ({ course }: { course: Course }) => {
|
|
const { props } = usePage<SharedData>();
|
|
const { translate } = props;
|
|
const { frontend } = translate;
|
|
const { title, short_description, instructor, average_rating } = course;
|
|
const courseLanguage = courseLanguages.find((language) => language.value === course.language);
|
|
|
|
return (
|
|
<div className="space-y-7">
|
|
<h1 className="text-3xl font-semibold md:text-4xl">{title}</h1>
|
|
|
|
<p>{short_description}</p>
|
|
|
|
<div className="grid grid-cols-2 gap-y-4 lg:grid-cols-3">
|
|
{/* Instructor Info */}
|
|
<Link href={route('instructors.show', instructor.id)}>
|
|
<div className="group flex items-center gap-2">
|
|
<Avatar>
|
|
<AvatarImage src={instructor.user.photo || ''} alt={instructor.user.name} className="object-cover" />
|
|
<AvatarFallback>{instructor.user.name[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="font-medium group-hover:underline">{instructor.user.name}</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Rating */}
|
|
<div className="flex items-center gap-1">
|
|
<p className="font-semibold">{average_rating ? Number(average_rating).toFixed(1) : 0}</p>
|
|
<RatingStars rating={average_rating || 0} starClass="w-4 h-5" />
|
|
</div>
|
|
|
|
{/* Language */}
|
|
<div className="flex items-center gap-2">
|
|
<Languages className="h-5 w-5" />
|
|
<span>{courseLanguage?.label}</span>
|
|
</div>
|
|
|
|
{/* Certificate */}
|
|
<div className="flex items-center gap-2">
|
|
<GraduationCap className="h-5 w-5" />
|
|
<span>{frontend.course_certificate}</span>
|
|
</div>
|
|
|
|
{/* Students */}
|
|
<div className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
<span>{course.enrollments_count || 0} {frontend.enrolled_students}</span>
|
|
</div>
|
|
|
|
{/* Duration */}
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="h-5 w-5" />
|
|
<span>{getCourseDuration(course)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CourseHeader;
|