Merge pull request #10 from parth782/main

fixed issue (#2)
DSC-AIT-Pune · Oct 10, 2022 · 2e88adc · 2e88adc
2 parents ff0d187 + 256ed89
commit 2e88adc
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "process": "^0.11.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.0",
     "stream-browserify": "^3.0.0",
     "util": "^0.12.4",

diff --git a/public/index.html b/public/index.html
@@ -20,8 +20,30 @@
       integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
       crossorigin="anonymous"
     />
+    <script src="https://kit.fontawesome.com/f6ee30b18d.js" crossorigin="anonymous"></script>
+    <style>
+      .social-link {
+        width: 30px;
+        height: 30px;
+        border: 1px solid #ddd;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+        border-radius: 50%;
+        transition: all 0.3s;
+        font-size: 0.9rem;
+      }
 
-    <title>TextEdit</title>
+      .social-link:hover,
+      .social-link:focus {
+        background: #ddd;
+        text-decoration: none;
+        color: #555;
+      }
+    </style>
+
+    <title>TextEdit-LightMode</title>
   </head>
   <body>
     <noscript>You need make sure to enable JavaScript to run this app</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,47 +1,55 @@
 // import logo from './logo.svg';
 import { useState } from 'react';
 import './App.css';
-// import About from './components/About';
+import About from './components/About';
 // import React, { useState } from 'react';
 import Alert from './components/Alert';
 import Navbar from './components/Navbar';
 import TextForm from './components/TextForm';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 
 
 function App() {
   const [Mode, setMode] = useState('light');// whether dark mode is enabled or not
   const [btntxt, setbtntxt] = useState('Enable Dark Mode');
   const [alert, setAlert] = useState(null)
+  const [alertstate,setalertstate]=useState(false)
   const showAlert = (message, type) => {
+    setalertstate(true)
     setAlert({
       msg: message,
       type: type
     })
+
     setTimeout(() => {
       setAlert(null);
+      setalertstate(false)
     }, 1000);
   }
 
 
   const toggleMode = () => {
     if (Mode === 'light') {
       setMode('dark');
-      document.body.style.backgroundColor = '#042743';
-      document.getElementById('darkmode-id').style.color='white'
-      document.getElementById('darkmode-id').innerText = "Enable LightMode"
-      showAlert(" Dark mode has been enabled", "primary");
+
+      setbtntxt('Enable Light Mode');
+      document.body.style.backgroundColor = '#000066';
+      document.body.style.color = 'white'
+      showAlert(" Dark mode has been enabled", "success");
 
       document.title = 'TextEdit-Dark Mode';
 
     }
-    else
-    {
+    else {
+
       setMode('light');
+      setbtntxt('Enable Dark Mode');
+      setalertstate(true)
       document.body.style.backgroundColor = 'white';
-      document.getElementById('darkmode-id').style.color='#042743'
-      document.getElementById('darkmode-id').innerText = "Enable DarkMode"
-      showAlert("Light mode has been enabled", "primary");
+      document.body.style.color = '#042743'
+
+      showAlert("Light mode has been enabled", "success");
 
       document.title = 'TextEdit-Light Mode';
 
@@ -50,11 +58,20 @@ function App() {
   }
   return (
     <>
-      <Navbar title="TextEdit" about="About" mode={Mode} toggleMode={toggleMode} btntxt={btntxt} />
-
-        <Alert alert={alert} />
-        <strong><TextForm showAlert={showAlert} heading="Enter the text Now" /></strong>
-
+      <Router>
+        <Navbar title="TextEdit" about="About" mode={Mode} toggleMode={toggleMode} btntxt={btntxt} />
+
+        <Alert alert={alert} alertstate={alertstate} />
+        <Routes>
+          <Route exact path="/" element={<strong><TextForm showAlert={showAlert} heading="Enter the text Now" /></strong>}/>
+
+
+          <Route exact path="/about" element={ <About mode={Mode} />}/>
+
+
+        </Routes>
+      </Router>
+
     </>
   );
 }