BigModal : a full-height modal with disabled exit to edit content easily using Shadcn-UI

BigModal.tsx

import type { ReactNode } from 'react'
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/modules/design-system/primitives/Dialog'
import { Button } from '@/modules/design-system/primitives/Button'

export interface BigModalProps {
    title?: string
    subtitle?: string
    ctaText?: string
    isOpen: boolean
    onOpen: (...args: any[]) => void
    setIsOpen: (...args: any[]) => void
    onSave: (...args: any[]) => void
    trigger: ReactNode
    children: ReactNode
}

export const BigModal = ({ title, subtitle, ctaText, isOpen, setIsOpen, onOpen, onSave, trigger, children }: BigModalProps) => {
    return (
        <Dialog open={isOpen} onOpenChange={setIsOpen}>
            <DialogTrigger asChild onClick={onOpen}>
                {trigger}
            </DialogTrigger>
            <DialogContent
                className={'sm:max-w-[800px] bg-white'}
                onPointerDownOutside={e => e.preventDefault()}
                onInteractOutside={e => e.preventDefault()}
                onEscapeKeyDown={e => e.preventDefault()}
            >
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>{subtitle}</DialogDescription>
                </DialogHeader>
                <div className={'max-h-[75vh] h-[75vh] overflow-y-scroll'}>
                    {isOpen && (children)}
                </div>
                <DialogFooter>
                    <Button variant={'validate'} onClick={onSave} type={'submit'}>{ctaText}</Button>
                    <Button variant={'light'} onClick={() => setIsOpen(false)}>Annuler</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}