a680f1ffde
* tidy: UI updates to the borrow tables * feat: styled the toasts * tidy: format * fix: removed peer * fix: fixed the svgs * fix: stupid svgs * rename: X to Cross * tidy: wrap up the logic
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import classNames from 'classnames'
|
|
import { ReactNode } from 'react'
|
|
|
|
import { Button } from 'components/Button'
|
|
import Card from 'components/Card'
|
|
import { Cross } from 'components/Icons'
|
|
|
|
interface Props {
|
|
header: string | ReactNode
|
|
headerClassName?: string
|
|
children?: ReactNode | string
|
|
content?: ReactNode | string
|
|
className?: string
|
|
contentClassName?: string
|
|
open: boolean
|
|
setOpen?: (open: boolean) => void
|
|
}
|
|
|
|
export const Modal = (props: Props) => {
|
|
const onClickAway = () => {
|
|
if (props.setOpen) props.setOpen(false)
|
|
}
|
|
|
|
return props.open ? (
|
|
<div className='fixed inset-0 z-40 h-screen w-screen '>
|
|
<div className='relative flex h-full w-full items-center justify-center'>
|
|
<Card
|
|
className={classNames(
|
|
'relative z-40 w-[790px] max-w-full bg-white/5 backdrop-blur-3xl',
|
|
props.className,
|
|
)}
|
|
>
|
|
<div className={classNames('flex justify-between', props.headerClassName)}>
|
|
{props.header}
|
|
<Button
|
|
onClick={onClickAway}
|
|
leftIcon={<Cross />}
|
|
className='h-8 w-8'
|
|
iconClassName='h-2 w-2'
|
|
color='tertiary'
|
|
/>
|
|
</div>
|
|
<div className={props.contentClassName}>
|
|
{props.children ? props.children : props.content}
|
|
</div>
|
|
</Card>
|
|
<div
|
|
className='fixed inset-0 z-30 block h-full w-full bg-black/50 backdrop-blur-sm hover:cursor-pointer'
|
|
onClick={onClickAway}
|
|
role='button'
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null
|
|
}
|