128 lines
5.0 KiB
TypeScript
128 lines
5.0 KiB
TypeScript
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
|
|
import VideoPlayer from '@/components/video-player';
|
|
import courseLanguages from '@/data/course-languages';
|
|
import { getCourseDuration, systemCurrency } from '@/lib/utils';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { BarChart3, Calendar, Clock, Languages, Mail, Play, Users } from 'lucide-react';
|
|
import { CourseDetailsProps } from '../show';
|
|
import EnrollOrPlayerButton from './course-player-button';
|
|
|
|
const CoursePreview = () => {
|
|
const { course, system, translate } = usePage<CourseDetailsProps>().props;
|
|
const { frontend } = translate;
|
|
const currency = systemCurrency(system.fields['selling_currency']);
|
|
const courseLanguage = courseLanguages.find((language) => language.value === course.language);
|
|
|
|
return (
|
|
<div className="bg-card sticky top-24 space-y-5 rounded-lg border p-5 shadow">
|
|
<div className="space-y-4">
|
|
<div className="relative">
|
|
<img className="w-full rounded-lg" src={course.thumbnail ?? '/assets/images/blank-image.jpg'} alt="" />
|
|
|
|
{course.preview && (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<button className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-black/70 p-4 transition-transform hover:scale-110">
|
|
<Play className="h-6 w-6 text-white" />
|
|
</button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent className="overflow-hidden p-0 md:min-w-3xl">
|
|
<VideoPlayer
|
|
source={{
|
|
type: 'video' as const,
|
|
sources: [
|
|
{
|
|
src: course.preview,
|
|
type: 'video/mp4' as const,
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
</div>
|
|
|
|
<h2 className="text-4xl font-bold capitalize">
|
|
{course.pricing_type === 'free' ? (
|
|
course.pricing_type
|
|
) : course.discount ? (
|
|
<>
|
|
<span className="font-semibold">
|
|
{currency?.symbol}
|
|
{course.discount_price}
|
|
</span>
|
|
<span className="text-muted-foreground ml-2 text-base font-medium line-through">
|
|
{currency?.symbol}
|
|
{course.price}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="font-semibold">
|
|
{currency?.symbol}
|
|
{course.price}
|
|
</span>
|
|
</>
|
|
)}
|
|
</h2>
|
|
|
|
<EnrollOrPlayerButton />
|
|
</div>
|
|
|
|
<div className="space-y-4 pt-5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
{frontend.students}
|
|
</span>
|
|
<span>{course.enrollments_count || 0}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2">
|
|
<Languages className="h-5 w-5" />
|
|
{frontend.language}
|
|
</span>
|
|
<span>{courseLanguage?.label}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2">
|
|
<Clock className="h-5 w-5" />
|
|
{frontend.duration}
|
|
</span>
|
|
<span>{getCourseDuration(course)}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2">
|
|
<BarChart3 className="h-5 w-5" />
|
|
{frontend.level}
|
|
</span>
|
|
<span className="capitalize">{course.level}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2">
|
|
<Calendar className="h-5 w-5" />
|
|
{frontend.expiry_period}
|
|
</span>
|
|
<span className="capitalize">{course.expiry_type === 'lifetime' ? 'lifetime' : course?.expiry_duration}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2">
|
|
<Mail className="h-5 w-5" />
|
|
{frontend.certificate_included}
|
|
</span>
|
|
<span>Yes</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CoursePreview;
|