60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { mdiClose } from '@mdi/js'
|
|
import { ReactNode } from 'react'
|
|
import type { ColorButtonKey } from '../interfaces'
|
|
import BaseButton from './BaseButton'
|
|
import BaseButtons from './BaseButtons'
|
|
import CardBox from './CardBox'
|
|
import CardBoxComponentTitle from './CardBoxComponentTitle'
|
|
import OverlayLayer from './OverlayLayer'
|
|
|
|
type Props = {
|
|
title: string
|
|
buttonColor: ColorButtonKey
|
|
buttonLabel: string
|
|
isActive: boolean
|
|
children?: ReactNode
|
|
onConfirm: () => void
|
|
onCancel?: () => void
|
|
}
|
|
|
|
const CardBoxModal = ({
|
|
title,
|
|
buttonColor,
|
|
buttonLabel,
|
|
isActive,
|
|
children,
|
|
onConfirm,
|
|
onCancel,
|
|
}: Props) => {
|
|
if (!isActive) {
|
|
return null
|
|
}
|
|
|
|
const footer = (
|
|
<BaseButtons>
|
|
<BaseButton label={buttonLabel} color={buttonColor} onClick={onConfirm} />
|
|
{!!onCancel && <BaseButton label="Cancel" color={buttonColor} outline onClick={onCancel} />}
|
|
</BaseButtons>
|
|
)
|
|
|
|
return (
|
|
<OverlayLayer onClick={onCancel} className={onCancel ? 'cursor-pointer' : ''}>
|
|
<CardBox
|
|
className={`transition-transform shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50`}
|
|
isModal
|
|
footer={footer}
|
|
>
|
|
<CardBoxComponentTitle title={title}>
|
|
{!!onCancel && (
|
|
<BaseButton icon={mdiClose} color="whiteDark" onClick={onCancel} small roundedFull />
|
|
)}
|
|
</CardBoxComponentTitle>
|
|
|
|
<div className="space-y-3">{children}</div>
|
|
</CardBox>
|
|
</OverlayLayer>
|
|
)
|
|
}
|
|
|
|
export default CardBoxModal
|