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 { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { SharedData } from '@/types/global';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { Book, Star, Users } from 'lucide-react';
|
|
|
|
const Instructor = ({ course }: { course: Course }) => {
|
|
const { props } = usePage<SharedData>();
|
|
const { translate } = props;
|
|
const { frontend } = translate;
|
|
const { instructor } = course;
|
|
const { user, courses } = instructor;
|
|
const enrollmentsCount = courses.reduce((acc, course) => acc + (course.enrollments_count || 0), 0);
|
|
|
|
return (
|
|
<div>
|
|
<h6 className="mb-4 text-xl font-semibold">{frontend.instructor}</h6>
|
|
<Separator className="my-4" />
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Link href={route('instructors.show', instructor.id)}>
|
|
<Avatar className="h-12 w-12">
|
|
<AvatarImage src={user.photo || ''} alt="@shadcn" className="object-cover" />
|
|
<AvatarFallback>CN</AvatarFallback>
|
|
</Avatar>
|
|
</Link>
|
|
|
|
<Link href={route('instructors.show', instructor.id)}>
|
|
<div className="group">
|
|
<h3 className="text-xl font-semibold group-hover:underline">{user.name}</h3>
|
|
<p className="text-gray-500">{user.email}</p>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="ml-auto flex items-center gap-1">
|
|
<span className="text-xl font-semibold">
|
|
{instructor.total_average_rating ? Number(instructor.total_average_rating).toFixed(1) : 0}
|
|
</span>
|
|
|
|
<RatingStars rating={instructor.total_average_rating} starClass="w-4 h-5" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex gap-8">
|
|
<div className="flex items-center gap-2">
|
|
<Users className="h-5 w-5 text-gray-500" />
|
|
<span>{enrollmentsCount} {frontend.students}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Book className="h-5 w-5 text-gray-500" />
|
|
<span>{courses.length} Courses</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Star className="h-5 w-5 text-gray-500" />
|
|
<span>{instructor.total_reviews_count} Reviews</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button className="mt-6">
|
|
<Link href={route('instructors.show', instructor.id)}>{frontend.view_details}</Link>
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Instructor;
|