141 lines
4.1 KiB
TypeScript
141 lines
4.1 KiB
TypeScript
import Tabs from '@/components/tabs';
|
|
import { TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import DashboardLayout from '@/layouts/dashboard/layout';
|
|
import { SharedData } from '@/types/global';
|
|
import { router } from '@inertiajs/react';
|
|
import { BookText, CircleDollarSign, FileText, FlaskConical, FolderInput, HelpCircle, ListTodo, Settings } from 'lucide-react';
|
|
import { nanoid } from 'nanoid';
|
|
import { ReactNode } from 'react';
|
|
import ExamUpdateHeader from './partials/exam-update-header';
|
|
import Attempts from './partials/tabs-content/attempts';
|
|
import Basic from './partials/tabs-content/basic';
|
|
import Info from './partials/tabs-content/info';
|
|
import Media from './partials/tabs-content/media';
|
|
import Pricing from './partials/tabs-content/pricing';
|
|
import Questions from './partials/tabs-content/questions';
|
|
import Resources from './partials/tabs-content/resources';
|
|
import SEO from './partials/tabs-content/seo';
|
|
import ExamSettings from './partials/tabs-content/settings';
|
|
|
|
export interface ExamUpdateProps extends SharedData {
|
|
tab?: string;
|
|
exam: Exam;
|
|
attempt: ExamAttempt | null;
|
|
attempts: Pagination<ExamAttempt>;
|
|
categories: ExamCategory[];
|
|
instructors: Instructor[] | null;
|
|
}
|
|
|
|
const Update = (props: ExamUpdateProps) => {
|
|
const { tab, exam } = props;
|
|
|
|
const tabs = [
|
|
{
|
|
id: nanoid(),
|
|
name: 'Questions',
|
|
slug: 'questions',
|
|
Icon: HelpCircle,
|
|
Component: Questions,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'Resources',
|
|
slug: 'resources',
|
|
Icon: ListTodo,
|
|
Component: Resources,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'Attempts',
|
|
slug: 'attempts',
|
|
Icon: ListTodo,
|
|
Component: Attempts,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'Basic',
|
|
slug: 'basic',
|
|
Icon: Settings,
|
|
Component: Basic,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'Pricing',
|
|
slug: 'pricing',
|
|
Icon: CircleDollarSign,
|
|
Component: Pricing,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'Settings',
|
|
slug: 'settings',
|
|
Icon: BookText,
|
|
Component: ExamSettings,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'Info',
|
|
slug: 'info',
|
|
Icon: FileText,
|
|
Component: Info,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'Media',
|
|
slug: 'media',
|
|
Icon: FolderInput,
|
|
Component: Media,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: 'SEO',
|
|
slug: 'seo',
|
|
Icon: FlaskConical,
|
|
Component: SEO,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="space-y-8">
|
|
<ExamUpdateHeader />
|
|
|
|
<Tabs value={tab ?? tabs[0].slug} className="grid grid-rows-1 gap-5 md:grid-cols-4">
|
|
<div className="col-span-full md:col-span-1">
|
|
<TabsList className="horizontal-tabs-list space-y-1">
|
|
{tabs.map(({ id, name, slug, Icon }) => (
|
|
<TabsTrigger
|
|
key={id}
|
|
value={slug}
|
|
className="horizontal-tabs-trigger"
|
|
onClick={() =>
|
|
router.get(
|
|
route('exams.edit', {
|
|
exam: exam.id,
|
|
tab: slug,
|
|
}),
|
|
)
|
|
}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{name}</span>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</div>
|
|
|
|
<div className="col-span-full md:col-span-3">
|
|
{tabs.map(({ id, slug, Component }) => (
|
|
<TabsContent key={id} value={slug} className="m-0">
|
|
<Component />
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
</Tabs>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
Update.layout = (page: ReactNode) => <DashboardLayout children={page} />;
|
|
|
|
export default Update;
|