new feature added

Author: rohitbhadane310

project-1/project-app/src/App.js

@@ -7,22 +7,32 @@ import TextForm from './components/TextForm';
 
 function App() {
  const [mode, setMode] = useState('light');
+ const [alert , setAlert] = useState(null);
+
+ const showAlert = (message , type) =>{
+ setAlert({
+ msg: message,
+ type: type
+ })
+ }
 
  const toggleMode = () => {
  if (mode === 'light') {
  setMode('dark');
  document.body.style.backgroundColor = 'black';
+ showAlert("Dark mode has been enabled" , "success");
  }
  else {
  setMode('light');
  document.body.style.backgroundColor = 'white';
+ showAlert("light mode has been enabled" , "success");
  }
  }
 
  return (
  <>
  <Navbar title="TextUtils" aboutText="About" mode={mode} toggleMode={toggleMode} />
- <Alert Alert ="This is alert"/>
+ <Alert alert ={alert}/>
  {/* <Navbar title = "textUtils" aboutText = "About textUtils"/> */}
  <div className="container my-3">
  {/* <TextForm heading = "Enter the text to analyze below"/> */}

project-1/project-app/src/components/Alert.js

@@ -1,12 +1,12 @@
 import React from 'react';
 
-export default function Alert(props) {
+function Alert(props) {
  return (
- <>
- <div className="alert alert-warning alert-dismissible fade show" role="alert">
- <strong>{props.Alert}</strong>
- <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
- </div>
- </>
+ props.alert && <div className="alert alert-warning alert-dismissible fade show" role="alert">
+ <strong>{props.alert.type}</strong>: {props.alert.msg}
+ <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+ </div>
  )
-}
+}
+
+export default Alert;