69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import RatingStars from '@/components/rating-stars';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { ExamPreviewProps } from '@/types/page';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { Clock, GraduationCap, Users } from 'lucide-react';
|
|
|
|
const ExamHeader = () => {
|
|
const { exam, instructor, translate } = usePage<ExamPreviewProps>().props;
|
|
const { frontend } = translate;
|
|
const { title, short_description, average_rating } = exam;
|
|
|
|
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>
|
|
{exam.enrollments_count || 0} {frontend.enrolled_students}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Duration */}
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="h-5 w-5" />
|
|
<span>
|
|
{exam.duration_hours} hours {exam.duration_minutes} minutes
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExamHeader;
|