104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import ExamCard7 from '@/components/cards/exam-card-7';
|
|
import Tabs from '@/components/tabs';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { StudentExamProps } from '@/types/page';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import { ReactNode } from 'react';
|
|
import Layout from '../partials/layout';
|
|
import ExamAttempts from '../tabs-content/exam-attempts';
|
|
import ExamCertificate from '../tabs-content/exam-certificate';
|
|
import ExamResources from '../tabs-content/exam-resources';
|
|
import ExamResult from '../tabs-content/exam-result';
|
|
|
|
const Exam = (props: StudentExamProps) => {
|
|
const { tab, exam, attempt, attempts, bestAttempt } = props;
|
|
|
|
const tabs = [
|
|
// {
|
|
// value: 'modules',
|
|
// label: 'Modules',
|
|
// },
|
|
// {
|
|
// value: 'questions',
|
|
// label: 'Questions',
|
|
// },
|
|
{
|
|
value: 'attempts',
|
|
label: 'Attempts',
|
|
},
|
|
{
|
|
value: 'resources',
|
|
label: 'Resources',
|
|
},
|
|
{
|
|
value: 'certificate',
|
|
label: 'Certificate',
|
|
},
|
|
];
|
|
|
|
const renderContent = () => {
|
|
switch (tab) {
|
|
// case 'modules':
|
|
// return <ExamModules />;
|
|
// case 'questions':
|
|
// return <ExamQuestions />;
|
|
case 'attempts':
|
|
return attempt ? <ExamResult /> : <ExamAttempts />;
|
|
case 'resources':
|
|
return <ExamResources />;
|
|
case 'certificate':
|
|
return <ExamCertificate />;
|
|
default:
|
|
return <></>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head title={exam.title} />
|
|
|
|
<ExamCard7 exam={exam} attempts={attempts || []} bestAttempt={bestAttempt} />
|
|
|
|
<Card className="mt-6">
|
|
<Tabs value={tab} className="bg-card w-full overflow-hidden rounded-md">
|
|
<div className="overflow-x-auto overflow-y-hidden">
|
|
<TabsList className="bg-transparent px-0 py-6">
|
|
{tabs.map(({ label, value }) => {
|
|
return (
|
|
<TabsTrigger
|
|
key={value}
|
|
value={value}
|
|
className="border-primary data-[state=active]:!bg-muted data-[state=active]:before:bg-primary relative flex cursor-pointer items-center justify-start gap-3 rounded-none bg-transparent px-8 py-4 text-start !shadow-none before:absolute before:right-0 before:bottom-0 before:left-0 before:h-1 before:rounded-t-xl data-[state=active]:before:content-['.']"
|
|
asChild
|
|
>
|
|
<Link
|
|
href={route('student.exam.show', {
|
|
id: exam.id,
|
|
tab: value,
|
|
})}
|
|
>
|
|
<span>{label}</span>
|
|
</Link>
|
|
</TabsTrigger>
|
|
);
|
|
})}
|
|
</TabsList>
|
|
</div>
|
|
|
|
<Separator className="mt-[1px]" />
|
|
|
|
<TabsContent value={tab} className="m-0 p-5">
|
|
{renderContent()}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</Card>
|
|
</>
|
|
);
|
|
};
|
|
|
|
Exam.layout = (page: ReactNode) => <Layout children={page} tab="exams" />;
|
|
|
|
export default Exam;
|