lms/resources/js/components/section-editor/index.tsx
2025-12-15 12:26:23 +01:00

43 lines
1.4 KiB
TypeScript

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { useLang } from '@/hooks/use-lang';
import { ReactNode } from 'react';
import { SectionEditorProvider, useSectionEditor } from './context';
import EditorForm from './form';
interface Props {
section: PageSection;
actionComponent: ReactNode;
}
const SectionEditor = ({ section, actionComponent }: Props) => {
return (
<SectionEditorProvider section={section}>
<SectionEditorContent actionComponent={actionComponent} />
</SectionEditorProvider>
);
};
// Separate component to use the context
const SectionEditorContent = ({ actionComponent }: { actionComponent: ReactNode }) => {
const { button, frontend } = useLang();
const { open, setOpen, isSubmit, section } = useSectionEditor();
return (
<Dialog open={open} onOpenChange={(value) => !isSubmit && setOpen(value)}>
<DialogTrigger asChild>{actionComponent}</DialogTrigger>
<DialogContent className="max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-lg font-medium">
{button.update} {section.name} {frontend.section}
</DialogTitle>
</DialogHeader>
<EditorForm />
</DialogContent>
</Dialog>
);
};
export default SectionEditor;