69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import CheckIcon from '@/assets/CheckIcon';
|
|
import CloseIcon from '@/assets/CloseIcon';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
type Props = {
|
|
title: string;
|
|
content: string | JSX.Element;
|
|
message?: string;
|
|
onClose: (ev: React.MouseEvent<HTMLButtonElement>) => void;
|
|
onAccept?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
|
|
onDeny?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
|
|
};
|
|
|
|
const ConfirmPopup = ({
|
|
title,
|
|
content,
|
|
message,
|
|
onClose,
|
|
onAccept,
|
|
onDeny = onClose,
|
|
}: Props) => {
|
|
return (
|
|
<div className='popupOverlay'>
|
|
<div
|
|
className='popup'
|
|
onClick={(ev) => ev.stopPropagation()}
|
|
>
|
|
<div className='popupHeader'>
|
|
<p className='popupTitle'>{title}</p>
|
|
<button
|
|
className='popupCloseButton'
|
|
onClick={onClose}
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</div>
|
|
<div className='popupContent'>{message || content}</div>
|
|
<div className='popupButtonsContainer'>
|
|
<button
|
|
type='button'
|
|
className='popupButton'
|
|
onClick={onDeny}
|
|
>
|
|
<CloseIcon />
|
|
Non
|
|
</button>
|
|
|
|
<button
|
|
type='button'
|
|
className='popupButton'
|
|
onClick={onAccept}
|
|
>
|
|
<CheckIcon />
|
|
{message ? 'Réessayer' : 'Oui'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConfirmPopup;
|