111 lines
4.4 KiB
TypeScript
111 lines
4.4 KiB
TypeScript
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
|
|
import { cn, getCourseDuration, systemCurrency } from '@/lib/utils';
|
|
import { SharedData } from '@/types/global';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { Clock, Star, TrendingUp, Users } from 'lucide-react';
|
|
import { Separator } from '../ui/separator';
|
|
|
|
interface Props {
|
|
course: Course;
|
|
className?: string;
|
|
}
|
|
|
|
const CourseCard5 = ({ course, className }: Props) => {
|
|
const { props } = usePage<SharedData>();
|
|
const { common, frontend } = props.translate;
|
|
const currency = systemCurrency(props.system.fields['selling_currency']);
|
|
|
|
return (
|
|
<Card className={cn('flex items-center', className)}>
|
|
<CardHeader className="p-0">
|
|
<Link
|
|
href={route('course.details', {
|
|
slug: course.slug,
|
|
id: course.id,
|
|
})}
|
|
>
|
|
<div className="relative h-[260px] w-[250px] overflow-hidden rounded-l-lg">
|
|
<img
|
|
src={course.thumbnail || '/assets/images/blank-image.jpg'}
|
|
alt={course.title}
|
|
className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
|
|
onError={(e) => {
|
|
const target = e.target as HTMLImageElement;
|
|
target.src = '/assets/images/blank-image.jpg';
|
|
}}
|
|
/>
|
|
</div>
|
|
</Link>
|
|
</CardHeader>
|
|
|
|
<div className="flex w-full flex-col justify-between p-5">
|
|
<CardContent className="p-0">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<p className="text-secondary-foreground text-xs uppercase">{course.course_category.title}</p>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{course.discount ? (
|
|
<p className="pt-1 text-gray-300 line-through">
|
|
{currency?.symbol}
|
|
{course.discount_price}
|
|
</p>
|
|
) : (
|
|
''
|
|
)}
|
|
|
|
{course.pricing_type === 'free' ? (
|
|
<p className="text-lg font-semibold">{common.free}</p>
|
|
) : (
|
|
<p className="text-lg font-semibold">
|
|
{currency?.symbol}
|
|
{course.price}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Link
|
|
href={route('course.details', {
|
|
slug: course.slug,
|
|
id: course.id,
|
|
})}
|
|
>
|
|
<p className="hover:text-secondary-foreground text-lg font-semibold">{course.title}</p>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-8 py-5">
|
|
<p className="flex items-center gap-1.5">
|
|
<Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
|
|
<span className="font-medium">{course.average_rating || 0}</span>
|
|
<span className="text-muted-foreground text-sm">
|
|
({course.reviews_count || 0} {common.reviews})
|
|
</span>
|
|
</p>
|
|
<p className="flex items-center gap-1.5">
|
|
<Users className="h-3.5 w-3.5" />
|
|
<span className="font-medium">{course.enrollments_count || 0}</span>
|
|
<span className="text-muted-foreground text-sm">{course.enrollments_count || 0 > 0 ? common.students : frontend.student}</span>
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
|
|
<Separator className="bg-muted" />
|
|
|
|
<CardFooter className="flex items-center gap-5 p-0 pt-6">
|
|
<p className="text-muted-foreground flex items-center gap-1">
|
|
<Clock className="h-4 w-4" />
|
|
<span className="text-sm">{getCourseDuration(course, 'readable')}</span>
|
|
</p>
|
|
|
|
<p className="text-muted-foreground flex items-center gap-1">
|
|
<TrendingUp className="h-4 w-4" />
|
|
<span className="text-sm">{course.level}</span>
|
|
</p>
|
|
</CardFooter>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CourseCard5;
|