text: import React, { useState } from "react";
  import NavTabs from "./NavTabs";
  import FooterTabs from "./FooterTabs";
  import Portfolio from "./pages/Portfolio";
  import About from "./pages/About";
  import Resume from "./pages/Resume";
  import Contact from "./pages/Contact";
  
  export default function PortfolioContainer() {
    const [currentPage, setCurrentPage] = useState("About");
  
    // This method is checking to see what the value of `currentPage` is. Depending on the value of currentPage, we return the corresponding component to render.
    const renderPage = () => {
      if (currentPage === "About") {
        return <About />;
      }
      if (currentPage === "Portfolio") {
        return <Portfolio />;
      }
      if (currentPage === "Contact") {
        return <Contact />;
      }
      return <Resume />;
    };
  
    const handlePageChange = (page) => setCurrentPage(page);
  
    return (
      <div>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
        />
        {/* We are passing the currentPage from state and the function to update it */}
        <NavTabs currentPage={currentPage} handlePageChange={handlePageChange} />
        {/* Here we are calling the renderPage method which will return a component  */}
        {renderPage()}
        <FooterTabs />
      </div>
    );
  }
  