/
BaseModal.tsx
70 lines (64 loc) 路 1.55 KB
/
BaseModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalHeader,
} from "@nextui-org/react";
import React from "react";
import { Action, FooterContent } from "./FooterContent";
import { HeaderContent } from "./HeaderContent";
interface BaseModalProps {
isOpen: boolean;
onOpenChange: (isOpen: boolean) => void;
title: string;
isDismissable?: boolean;
subtitle?: string;
actions?: Action[];
children?: React.ReactNode;
}
function BaseModal({
isOpen,
onOpenChange,
title,
isDismissable = true,
subtitle,
actions,
children,
}: BaseModalProps) {
return (
<Modal
isOpen={isOpen}
onOpenChange={onOpenChange}
title={title}
isDismissable={isDismissable}
backdrop="blur"
hideCloseButton
size="sm"
className="bg-neutral-900 rounded-lg"
>
<ModalContent className="max-w-[24rem] p-[40px]">
{(closeModal) => (
<>
<ModalHeader className="flex flex-col p-0">
<HeaderContent title={title} subtitle={subtitle} />
</ModalHeader>
<ModalBody className="px-0 py-[20px]">{children}</ModalBody>
{actions && actions.length > 0 && (
<ModalFooter className="flex-col flex justify-start p-0">
<FooterContent actions={actions} closeModal={closeModal} />
</ModalFooter>
)}
</>
)}
</ModalContent>
</Modal>
);
}
BaseModal.defaultProps = {
isDismissable: true,
subtitle: undefined,
actions: [],
children: null,
};
export default BaseModal;