34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
|
|
import tw from 'twin.macro';
|
|
import Button from '@/components/elements/Button';
|
|
|
|
type Props = {
|
|
title: string;
|
|
buttonText: string;
|
|
children: string;
|
|
onConfirmed: () => void;
|
|
showSpinnerOverlay?: boolean;
|
|
} & RequiredModalProps;
|
|
|
|
const ConfirmationModal = ({ title, appear, children, visible, buttonText, onConfirmed, showSpinnerOverlay, onDismissed }: Props) => (
|
|
<Modal
|
|
appear={appear || true}
|
|
visible={visible}
|
|
showSpinnerOverlay={showSpinnerOverlay}
|
|
onDismissed={() => onDismissed()}
|
|
>
|
|
<h2 css={tw`text-2xl mb-6`}>{title}</h2>
|
|
<p css={tw`text-sm`}>{children}</p>
|
|
<div css={tw`flex items-center justify-end mt-8`}>
|
|
<Button isSecondary onClick={() => onDismissed()}>
|
|
Cancel
|
|
</Button>
|
|
<Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
|
|
{buttonText}
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
|
|
export default ConfirmationModal;
|