Add: logic to render Navbar links on Navbar

Author: rebecatschiedel

components/Nav.js

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import styles from "../styles/Nav.module.css";
 import layoutStyles from "../styles/Layout.module.css";
+import { linksNav } from "../utils/links";
 
 export default function Nav() {
   const [active, setActive] = useState(false);
@@ -43,21 +44,13 @@ export default function Nav() {
         </div>
         <nav className={`${active ? styles.navVisible : styles.nav}`}>
           <ul className={styles.navList}>
-            <li className={styles.navItem}>
-              <Link href="/about-us">
-                <a className={styles.navLink}>About Us</a>
-              </Link>
-            </li>
-            <li className={styles.navItem}>
-              <Link href="/blog">
-                <a className={styles.navLink}>Blog</a>
-              </Link>
-            </li>
-            <li className={styles.navItem}>
-              <Link href="/contact-us">
-                <a className={styles.navLink}>Contact Us</a>
-              </Link>
-            </li>
+            {linksNav.map((link) => (
+              <li className={styles.navItem} key={link.href}>
+                <Link href={link.href}>
+                  <a className={styles.navLink}>{link.text}</a>
+                </Link>
+              </li>
+            ))}
           </ul>
         </nav>
       </div>