CodeWithHarry
diff --git a/‎package-lock.json
Lines changed: 96 additions & 0 deletions b/‎package-lock.json
Lines changed: 96 additions & 0 deletions
diff --git a/‎package.json
Lines changed: 1 addition & 0 deletions b/‎package.json
Lines changed: 1 addition & 0 deletions
diff --git a/‎public/favicon-16x16.png
838 Bytes b/‎public/favicon-16x16.png
838 Bytes
diff --git a/‎public/favicon-32x32.png
996 Bytes b/‎public/favicon-32x32.png
996 Bytes
diff --git a/‎public/favicon-96x96.png
1.57 KB b/‎public/favicon-96x96.png
1.57 KB
diff --git a/‎public/favicon.ico
-2.66 KB b/‎public/favicon.ico
-2.66 KB
diff --git a/‎public/index.html
Lines changed: 3 additions & 3 deletions b/‎public/index.html
Lines changed: 3 additions & 3 deletions
diff --git a/‎public/logo192.png
-5.22 KB b/‎public/logo192.png
-5.22 KB
diff --git a/‎public/logo512.png
-9.44 KB b/‎public/logo512.png
-9.44 KB
diff --git a/‎src/App.js
Lines changed: 42 additions & 1 deletion b/‎src/App.js
Lines changed: 42 additions & 1 deletion
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
   },
 
@@ -7,14 +7,14 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="TextUtils is a utility which can be used to manipulate your text in the way you want."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-16x16.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
 
-    <title>React App</title>
+    <title>TextUtils - Home</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
@@ -1,30 +1,71 @@
 import './App.css';
 import Navbar from './components/Navbar';
 import TextForm from './components/TextForm';
+import About from './components/About';
 import React, { useState } from 'react';
+import Alert from './components/Alert';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 
 
 function App() {
   const [mode, setMode] = useState('light'); // Whether dark mode is enabled or not
+  const [alert, setAlert] = useState(null);
+
+  const showAlert = (message, type)=>{
+      setAlert({
+        msg: message,
+        type: type
+      })
+      setTimeout(() => {
+          setAlert(null);
+      }, 1500);
+  }
 
   const toggleMode = ()=>{
     if(mode === 'light'){
       setMode('dark');
       document.body.style.backgroundColor = '#042743';
+      showAlert("Dark mode has been enabled", "success");
+      document.title = 'TextUtils - Dark Mode';
+      // setInterval(() => {
+      //   document.title = 'TextUtils is Amazing Mode';
+      // }, 2000);
+      // setInterval(() => {
+      //   document.title = 'Install TextUtils Now';
+      // }, 1500);
     }
     else{
       setMode('light');
       document.body.style.backgroundColor = 'white';
+      showAlert("Light mode has been enabled", "success");
+      document.title = 'TextUtils - Light Mode';
     }
   }
   return (
     <>
     {/* <Navbar title="TextUtils" aboutText="About TextUtils" /> */}
     {/* <Navbar/> */}
+    <Router>
     <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
+    <Alert alert={alert}/>
     <div className="container my-3">
-    <TextForm heading="Enter the text to analyze below" mode={mode}/>
+    <Switch>
+    {/* /users --> Component 1
+        /users/home --> Component 2 */}
+          <Route exact path="/about">
+            <About />
+          </Route>
+          <Route exact path="/">
+            <TextForm showAlert={showAlert} heading="Enter the text to analyze below" mode={mode}/>
+          </Route>
+    </Switch>
     </div>
+    </Router>
     </> 
   );
 }