84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
|
import { cn } from '@/lib/utils';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import ButtonGradientPrimary from '../button-gradient-primary';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
|
|
import { Progress } from '../ui/progress';
|
|
|
|
interface Props {
|
|
course: Course;
|
|
watch_history: WatchHistory;
|
|
completion: CourseCompletion;
|
|
className?: string;
|
|
}
|
|
|
|
const CourseCard7 = ({ course, watch_history, completion, className }: Props) => {
|
|
const { props } = usePage();
|
|
const { translate } = props as any;
|
|
const { frontend, button } = translate;
|
|
|
|
return (
|
|
<Card className={cn('flex flex-col justify-between overflow-hidden !border md:flex-row', className)}>
|
|
<CardHeader className="h-[200px] w-full max-w-[360px] p-0">
|
|
<img
|
|
src={course.thumbnail || '/assets/images/blank-image.jpg'}
|
|
alt={course.title}
|
|
className="h-full w-full object-cover"
|
|
onError={(e) => {
|
|
const target = e.target as HTMLImageElement;
|
|
target.src = '/assets/images/blank-image.jpg';
|
|
}}
|
|
/>
|
|
</CardHeader>
|
|
|
|
<CardContent className="flex w-full flex-col justify-between p-4">
|
|
<div>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={course.instructor.user.photo || ''} alt={course.instructor.user.name} className="object-cover" />
|
|
<AvatarFallback>IM</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<p className="text-sm font-medium">{course.instructor.user.name}</p>
|
|
</div>
|
|
</div>
|
|
<p className="hover:text-secondary-foreground text-sm font-semibold">{course.title}</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="w-full space-y-2 pt-4 pb-2">
|
|
<p className="text-muted-foreground flex items-center justify-between text-sm font-medium">
|
|
<span>{frontend.progress}</span>
|
|
<span>{completion?.completion ?? 0}%</span>
|
|
</p>
|
|
|
|
<Progress value={Number(completion?.completion ?? 0)} className="h-1.5" />
|
|
</div>
|
|
|
|
{watch_history && (
|
|
<ButtonGradientPrimary
|
|
asChild
|
|
shadow={false}
|
|
containerClass="w-full"
|
|
className="to-primary-light hover:to-primary-light h-9 w-full"
|
|
>
|
|
<Link
|
|
href={route('course.player', {
|
|
type: watch_history.current_watching_type,
|
|
watch_history: watch_history.id,
|
|
lesson_id: watch_history.current_watching_id,
|
|
})}
|
|
>
|
|
{button.continue}
|
|
</Link>
|
|
</ButtonGradientPrimary>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CourseCard7;
|