Notes

import React from 'react';
import './DynamicAlert.css'; // Import the CSS file

const DynamicAlert = ({ message, type, showAlert, closeAlert }) => {
const alertTypeClass = type ? `alert-${type}` : '';

return (
<div className={`alert-popup ${showAlert ? 'show' : ''}`}>
<div className={`alert-content ${alertTypeClass}`}>
<span>{message}</span>
<button className="close-btn" onClick={closeAlert}>
Close
</button>
</div>
</div>
);
};

export default DynamicAlert;

-------------------------------------------------
.alert-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}

.alert-popup.show {
display: flex;
}

.alert-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
width: 300px;
}

.alert-success {
background-color: #28a745;
color: white;
}

.alert-error {
background-color: #dc3545;
color: white;
}

.alert-warning {
background-color: #ffc107;
color: black;
}

.close-btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
margin-top: 10px;
border-radius: 5px;
}

.close-btn:hover {
background-color: #0056b3;
}
------------------------------------
component call

import React, { useState } from 'react';
import DynamicAlert from './DynamicAlert'; // Import the dynamic alert component

const App = () => {
const [showAlert, setShowAlert] = useState(false);
const [alertType, setAlertType] = useState('success');
const [alertMessage, setAlertMessage] = useState('This is a success message!');

// Function to display the alert with dynamic type and message
const handleShowAlert = (type, message) => {
setAlertType(type);
setAlertMessage(message);
setShowAlert(true);
};

// Function to close the alert
const handleCloseAlert = () => {
setShowAlert(false);
};

return (
<div>
<h1>Dynamic React Alert Popup Example</h1>

{/* Buttons to trigger different types of alerts */}
<button onClick={() => handleShowAlert('success', 'This is a success message!')}>
Show Success Alert
</button>
<button onClick={() => handleShowAlert('error', 'This is an error message!')}>
Show Error Alert
</button>
<button onClick={() => handleShowAlert('warning', 'This is a warning message!')}>
Show Warning Alert
</button>

{/* DynamicAlert component */}
<DynamicAlert
message={alertMessage}
type={alertType}
showAlert={showAlert}
closeAlert={handleCloseAlert}
/>
</div>
);
};

export default App;