36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
|
import { TriangleAlert } from "lucide-react";
|
||
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
|
||
|
|
|
||
|
|
interface ModalProps {
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
children?: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Modal: React.FC<ModalProps> = ({ title, description, isOpen, onClose, children }) => {
|
||
|
|
const onChange = (open: boolean) => {
|
||
|
|
if (!open) {
|
||
|
|
onClose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog open={isOpen} onOpenChange={onChange}>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader className="space-y-4">
|
||
|
|
<div className="mx-auto flex w-fit items-center justify-center gap-2 rounded-full bg-[#fcecbb] p-3 text-[#DC6803]">
|
||
|
|
<TriangleAlert size={32} />
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<DialogTitle className="text-center text-xl">{title}</DialogTitle>
|
||
|
|
<DialogDescription className="text-center text-base">{description}</DialogDescription>
|
||
|
|
</div>
|
||
|
|
</DialogHeader>
|
||
|
|
<div>{children}</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
};
|