101 lines
4.3 KiB
TypeScript
101 lines
4.3 KiB
TypeScript
import { Separator } from '@/components/ui/separator';
|
|
import { ExamPreviewProps } from '@/types/page';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { Award, BookOpen, Calendar, Check, Clock, Target, Users } from 'lucide-react';
|
|
|
|
const Details = () => {
|
|
const { exam, translate } = usePage<ExamPreviewProps>().props;
|
|
const { frontend } = translate;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="flex items-start gap-3">
|
|
<Clock className="mt-1 h-5 w-5 text-gray-400" />
|
|
<div>
|
|
<p className="font-semibold">Duration</p>
|
|
<p className="text-sm text-gray-600">
|
|
{exam.duration_hours > 0 && `${exam.duration_hours}h `}
|
|
{exam.duration_minutes > 0 && `${exam.duration_minutes}m`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<BookOpen className="mt-1 h-5 w-5 text-gray-400" />
|
|
<div>
|
|
<p className="font-semibold">Questions</p>
|
|
<p className="text-sm text-gray-600">{exam.total_questions} questions</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<Target className="mt-1 h-5 w-5 text-gray-400" />
|
|
<div>
|
|
<p className="font-semibold">Pass Mark</p>
|
|
<p className="text-sm text-gray-600">{exam.pass_mark} marks</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<Award className="mt-1 h-5 w-5 text-gray-400" />
|
|
<div>
|
|
<p className="font-semibold">Max Attempts</p>
|
|
<p className="text-sm text-gray-600">{exam.max_attempts} attempts</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<Users className="mt-1 h-5 w-5 text-gray-400" />
|
|
<div>
|
|
<p className="font-semibold">Enrolled Students</p>
|
|
<p className="text-sm text-gray-600">{exam.enrollments_count ?? 0}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<Calendar className="mt-1 h-5 w-5 text-gray-400" />
|
|
<div>
|
|
<p className="font-semibold">Access</p>
|
|
<p className="text-sm text-gray-600">{exam.expiry_type === 'lifetime' ? 'Lifetime' : `${exam.expiry_duration} days`}</p>
|
|
{/* {exam.expiry_type === 'lifetime' ? 'Lifetime access' : `${exam.expiry_duration} days access`} */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<div>
|
|
<h6 className="mb-4 text-xl font-semibold">{frontend.requirements}</h6>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="space-y-4">
|
|
{exam.requirements?.map(({ id, requirement }) => (
|
|
<div key={id} className="flex gap-3">
|
|
<div className="bg-secondary-light mt-0.5 flex h-5 w-full max-w-5 items-center justify-center rounded-full">
|
|
<Check className="text-secondary-foreground h-4 w-4 shrink-0" />
|
|
</div>
|
|
<p className="text-muted-foreground">{requirement}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h6 className="mb-4 text-xl font-semibold">{frontend.outcomes}</h6>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="space-y-4">
|
|
{exam.outcomes?.map(({ id, outcome }) => (
|
|
<div key={id} className="flex gap-3">
|
|
<div className="bg-secondary-light mt-0.5 flex h-5 w-full max-w-5 items-center justify-center rounded-full">
|
|
<Check className="text-secondary-foreground h-4 w-4 shrink-0" />
|
|
</div>
|
|
<p className="text-muted-foreground">{outcome}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Details;
|