You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.1 KiB
35 lines
1.1 KiB
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import './AlertPopup.css';
|
|
|
|
interface AlertPopupProps {
|
|
type: 'success' | 'error';
|
|
title?: string;
|
|
message?: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const AlertPopup: React.FC<AlertPopupProps> = ({
|
|
type,
|
|
title = type === 'success' ? 'Success!' : 'Oh Snap!',
|
|
message = type === 'success' ? 'Your operation completed successfully.' : 'Something went wrong. Please try again.',
|
|
onClose
|
|
}) => {
|
|
const icon = type === 'success' ? '😄' : '😕';
|
|
const buttonText = type === 'success' ? 'Close' : 'Close';
|
|
|
|
return ReactDOM.createPortal(
|
|
<div className="alert-overlay">
|
|
<div className={`alert-box alert-${type}`}>
|
|
{/* <button className="alert-close" onClick={onClose}>×</button> */}
|
|
<div className="alert-icon">{icon}</div>
|
|
<div className="alert-title">{title}</div>
|
|
<div className="alert-message">{message}</div>
|
|
<button className="alert-button" onClick={onClose}>{buttonText}</button>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
};
|
|
|
|
export default AlertPopup;
|