Add Footer component and integrate Font Awesome and React Icons

package.json

@@ -7,9 +7,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "font-awesome": "^4.7.0",
     "gh-pages": "^6.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,5 +1,6 @@
 import './App.css';
 import { Alert } from './components/Alert';
+import Footer from './components/Footer';
 import Navbar from './components/Navbar';
 // import { About } from './components/About';
 import { TextForms } from './components/TextForms';
@@ -69,6 +70,7 @@ function App() {
             {/* <Route exact path="/about" element={<About mode={mode} />} /> */}
         {/* </Routes> */}
       {/* </BrowserRouter> */}
+      <Footer  mode={mode}/>
     </>
   );
 }

src/components/Footer.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { FaTwitter, FaGithub, FaLinkedin } from "react-icons/fa";
+
+const Footer = (props) => {
+  return (
+    <>
+      <div className="mt-5">
+        <div className={`d-flex justify-content-around align-items-center bg-${props.mode} shadow-lg py-4`}>
+          <h6>
+            <i className={`fa text-${props.mode === 'light'? 'dark':'light'} fa-copyright me-2`}> Build with 💗 by Naman Khandelwal</i>
+          </h6>
+          <div className="d-flex justify-content-center">
+            <a href="https://twitter.com/NAMANKH31936926" className={`d-flex text-decoration-none text-${props.mode === 'light'? 'dark':'light'} align-items-center me-4`}>
+              <FaTwitter className="me-1" />
+              Twitter
+            </a>
+            <a href="https://github.com/namankoolwal" className={`d-flex text-decoration-none text-${props.mode === 'light'? 'dark':'light'} align-items-center me-4`}>
+              <FaGithub className="me-1" />
+              GitHub
+            </a>
+            <a href="https://www.linkedin.com/in/naman-khandelwal-568971189/" className={`d-flex text-decoration-none text-${props.mode === 'light'? 'dark':'light'} align-items-center`}>
+              <FaLinkedin className="me-1" />
+              LinkedIn
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Footer;

src/components/Navbar.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { FaGithub } from "react-icons/fa6";
 // import { Link } from 'react-router-dom'
 
 export default function Navbar(props) {
@@ -12,13 +13,18 @@ export default function Navbar(props) {
       <span className="navbar-toggler-icon"></span>
     </button>
     <div className="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+      <ul className="navbar-nav me-auto mb-2 mb-lg-0 d-flex justify-content-center align-items-center">
         <li className="nav-item">
           <a className="nav-link active" href="#">Home</a>
         </li>
-        {/* <li className="nav-item">
-          <Link className="nav-link" to="/about">{props.aboutText}</Link>
-        </li> */}
+
+        <li className="nav-item btn btn-dark text-white ms-2">
+
+        <a href="https://github.com/namankoolwal/TextUtil/" className="d-flex text-decoration-none text-white align-items-center">
+        <FaGithub className='fs-5 me-2' />
+              Give a Star
+            </a>
+        </li>
       </ul>
       <div className="d-flex">
         <div className="bg-primary rounded mx-2" style={{height:'30px', width:"30px", cursor:"pointer"}} onClick={()=>{props.toggleMode('primary')}}></div>