76 lines
1.7 KiB
TypeScript
76 lines
1.7 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;
|