Files
mes-budgets-participatifs/src/components/base/BaseModal.tsx

45 lines
1.1 KiB
TypeScript

import { ReactNode } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
interface BaseModalProps {
isOpen: boolean;
onClose: () => void;
title: string | ReactNode;
description?: string;
children: ReactNode;
footer?: ReactNode;
maxWidth?: string;
maxHeight?: string;
}
export function BaseModal({
isOpen,
onClose,
title,
description,
children,
footer,
maxWidth = "sm:max-w-[500px]",
maxHeight = "max-h-[90vh]"
}: BaseModalProps) {
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent
className={`${maxWidth} ${maxHeight} overflow-y-auto`}
data-testid="modal-content"
>
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader>
<div className="space-y-4">
{children}
</div>
{footer && <DialogFooter>{footer}</DialogFooter>}
</DialogContent>
</Dialog>
);
}