From 537c8af6a8bf1cbc122ad2b05eff51070cf024c4 Mon Sep 17 00:00:00 2001
From: Junseo Park <wonderlandpark@outlook.kr>
Date: Sat, 27 Feb 2021 19:42:41 +0900
Subject: [PATCH] feat: added Modal

---
 components/Modal.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 components/Modal.tsx

diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 0000000..bae1186
--- /dev/null
+++ b/components/Modal.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from 'react'
+import { Modal as ReactModal} from 'react-responsive-modal'
+import 'react-responsive-modal/styles.css'
+
+const Modal = ({ children, isOpen, onClose, dark, header }:ModalProps):JSX.Element => {
+	return <ReactModal open={isOpen} onClose={onClose} center animationDuration={100} classNames={{
+		modal: 'bg-discord-dark'
+	}}
+	showCloseIcon={false}
+	styles={{
+		modal: {
+			borderRadius: '10px',
+			background: dark ? '#2C2F33' : '#fbfbfb',
+			color: dark ? 'white' : 'black',
+			minWidth: '500px'
+		}
+	}}
+	>
+		<h2 className='text-lg font-black uppercase'>{header}</h2>
+		<div className='pt-4 relative'>
+			<div>
+				{children}
+			</div>
+		</div>
+	</ReactModal>
+}
+
+interface ModalProps {
+  dark: boolean
+  isOpen: boolean
+  header?: string
+  children: ReactNode
+  onClose(): void
+}
+
+export default Modal
\ No newline at end of file