text: import React from 'react';
  
  // Here we are using object destructuring assignment to pluck off our variables from the props object
  // We assign them to their own variable names
  function NavTabs({ currentPage, handlePageChange }) {
      return (
          <ul className="nav nav-tabs">
              <li className="nav-item">
                  <a
                      href="#home"
                      onClick={() => handlePageChange('Home')}
                      // This is a conditional (ternary) operator that checks to see if the current page is "Home"
                      // If it is, we set the current page to 'nav-link-active', otherwise we set it to 'nav-link'
                      className={currentPage === 'Home' ? 'nav-link active' : 'nav-link'}
                  >
                      Home
                  </a>
              </li>
              <li className="nav-item">
                  <a
                      href="#aboutme"
                      onClick={() => handlePageChange('AboutMe')}
                      // Check to see if the currentPage is `About`, and if so we use the active link class from bootstrap. Otherwise, we set it to a normal nav-link
                      className={currentPage === 'AboutMe' ? 'nav-link active' : 'nav-link'}
                  >
                      About Me
                  </a>
              </li>
              <li className="nav-item">
                  <a
                      href="#projects"
                      onClick={() => handlePageChange('Projects')}
                      // Check to see if the currentPage is `Blog`, and if so we use the active link class from bootstrap. Otherwise, we set it to a normal nav-link
                      className={currentPage === 'Blog' ? 'nav-link active' : 'nav-link'}
                  >
                      My Projects
                  </a>
              </li>
              <li className="nav-item">
                  <a
                      href="#resume"
                      onClick={() => handlePageChange('Resume')}
                      // Check to see if the currentPage is `Blog`, and if so we use the active link class from bootstrap. Otherwise, we set it to a normal nav-link
                      className={currentPage === 'Blog' ? 'nav-link active' : 'nav-link'}
                  >
                      My Resume
                  </a>
              </li>
  
              <li className="nav-item">
                  <a
                      href="#contact"
                      onClick={() => handlePageChange('Contact')}
                      // Check to see if the currentPage is `Contact`, and if so we use the active link class from bootstrap. Otherwise, we set it to a normal nav-link
                      className={currentPage === 'Contact' ? 'nav-link active' : 'nav-link'}
                  >
                      Let's Connect
                  </a>
              </li>
          </ul>
      );
  }
  
  export default NavTabs;