99 lines
3.5 KiB
TypeScript
99 lines
3.5 KiB
TypeScript
import RatingStars from '@/components/rating-stars';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ExamPreviewProps } from '@/types/page';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { Book, Star, Users } from 'lucide-react';
|
|
|
|
const Instructor = () => {
|
|
const { instructor, translate } = usePage<ExamPreviewProps>().props;
|
|
const { frontend } = translate;
|
|
const {
|
|
user,
|
|
courses_count,
|
|
total_reviews_count,
|
|
total_average_rating,
|
|
total_enrollments_count,
|
|
exams_count,
|
|
total_exam_reviews_count,
|
|
total_exam_average_rating,
|
|
total_exam_instructors_count,
|
|
} = instructor;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between gap-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>
|
|
|
|
<Button>
|
|
<Link href={route('instructors.show', instructor.id)}>{frontend.view_details}</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-6 flex gap-8">
|
|
<div className="flex items-center gap-2">
|
|
<Book className="h-5 w-5 text-gray-500" />
|
|
<span>{courses_count} Courses</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Users className="h-5 w-5 text-gray-500" />
|
|
<span>
|
|
{total_enrollments_count} {frontend.students}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Star className="h-5 w-5 text-gray-500" />
|
|
<span>{total_reviews_count} Reviews</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span>{total_average_rating ? Number(total_average_rating).toFixed(1) : 0}</span>
|
|
<RatingStars rating={total_average_rating} starClass="w-4 h-5" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex gap-8">
|
|
<div className="flex items-center gap-2">
|
|
<Book className="h-5 w-5 text-gray-500" />
|
|
<span>{exams_count} Exams</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Users className="h-5 w-5 text-gray-500" />
|
|
<span>
|
|
{total_exam_instructors_count} {frontend.students}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Star className="h-5 w-5 text-gray-500" />
|
|
<span>{total_exam_reviews_count} Reviews</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span>{total_exam_average_rating ? Number(total_exam_average_rating).toFixed(1) : 0}</span>
|
|
<RatingStars rating={total_exam_average_rating} starClass="w-4 h-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Instructor;
|