Video 6 completed

Author: harrycodewithharry

module1.mjs

@@ -0,0 +1,5 @@
+import dza, {a, c, d}  from './module2.mjs'
+console.log(dza);
+console.log(c);
+console.log(d);
+console.log(a);

module2.mjs

@@ -0,0 +1,9 @@
+const a = "Harry";
+const b = "Rohan";
+const c = "Aakash";
+const d = "Priyanka";
+
+export default b;  
+export {a};  
+export {c};  
+export {d};  

src/App.js

@@ -1,30 +1,12 @@
 import './App.css';
+import Navbar from './components/Navbar';
 
 function App() {
   return (
     <>
-    <nav className="navbar navbar-expand-lg navbar-light bg-light">
-      <div className="container-fluid">
-        <a className="navbar-brand" href="/">TextUtils</a>
-        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <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">
-            <li className="nav-item">
-              <a className="nav-link active" aria-current="page" href="/">Home</a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="/">About</a>
-            </li> 
-          </ul>
-          <form className="d-flex">
-            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button className="btn btn-outline-success" type="submit">Search</button>
-          </form>
-        </div>
-      </div>
-    </nav>
+    {/* <Navbar title="TextUtils" aboutText="About TextUtils" /> */}
+    {/* <Navbar/> */}
+    <Navbar title="TextUtils" />
     </> 
   );
 }

src/components/Navbar.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function Navbar(props) {
+    return (
+        <nav className="navbar navbar-expand-lg navbar-light bg-light">
+            <div className="container-fluid">
+                <a className="navbar-brand" href="/">{props.title}</a>
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <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">
+                        <li className="nav-item">
+                            <a className="nav-link active" aria-current="page" href="/">Home</a>
+                        </li>
+                        <li className="nav-item">
+                            <a className="nav-link" href="/">{props.aboutText}</a>
+                        </li>
+                    </ul>
+                    <form className="d-flex">
+                        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
+                        <button className="btn btn-outline-success" type="submit">Search</button>
+                    </form>
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+Navbar.propTypes = {
+    title: PropTypes.string.isRequired,
+    aboutText: PropTypes.string.isRequired
+}
+
+Navbar.defaultProps = {
+    title: 'Set title here',
+    aboutText: 'About'
+  };