wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-16 22:30:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: improved modal

Browse Source
This commit is contained in:
wonderlandpark 2021-03-04 20:27:33 +09:00
parent 407f888d60
commit dac59ec527
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Modal.tsx
View File

@ -2,7 +2,7 @@ import { ReactNode } from 'react'
import { Modal as ReactModal } from 'react-responsive-modal' import { Modal as ReactModal } from 'react-responsive-modal'
import 'react-responsive-modal/styles.css' import 'react-responsive-modal/styles.css'
const Modal = ({ children, isOpen, onClose, dark, header }: ModalProps): JSX.Element => { const Modal = ({ children, isOpen, onClose, dark, header, full=false }: ModalProps): JSX.Element => {
return ( return (
<ReactModal <ReactModal
open={isOpen} open={isOpen}
@ -18,12 +18,13 @@ const Modal = ({ children, isOpen, onClose, dark, header }: ModalProps): JSX.Ele
borderRadius: '10px', borderRadius: '10px',
background: dark ? '#2C2F33' : '#fbfbfb', background: dark ? '#2C2F33' : '#fbfbfb',
color: dark ? 'white' : 'black', color: dark ? 'white' : 'black',
width: full ? '100%' : 'inherit'
}, },
}} }}
> >
<h2 className='text-lg font-black uppercase'>{header}</h2> <h2 className='text-lg font-black uppercase'>{header}</h2>
<div className='relative pt-4'> <div className='relative pt-4'>
<div>{children}</div> <div className={dark ? 'dark' : 'light'}>{children}</div>
</div> </div>
</ReactModal> </ReactModal>
) )
@ -33,6 +34,7 @@ interface ModalProps {
dark: boolean dark: boolean
isOpen: boolean isOpen: boolean
header?: string header?: string
full?: boolean
children: ReactNode children: ReactNode
onClose(): void onClose(): void
} }