general clean up

CDCgov · Oct 24, 2024 · 2767fbd · 2767fbd
1 parent f4a4f22
commit 2767fbd
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 58 deletions.
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -4,11 +4,11 @@ import Link from 'next/link';
 import Image from 'next/image';
 import React from 'react';
 import styles from '../styles/Home.module.scss';
-import { NavigationLink } from './Header';
+import { NavigationLink } from './NavigationLink';
+import classNames from 'classnames';
+import { basePath } from '../utils/constants';
 
 export default function Footer() {
-  const basePath = '/dibbs-site';
-
   const [expanded, setExpanded] = React.useState(false);
   const onClick = () => {
     if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded);
@@ -17,22 +17,21 @@ export default function Footer() {
   const testItemsMenu = [
     <Link
       href="/"
-      key="one"
-      className={`usa-nav__link ${styles.homeNavItem}`}
+      className={classNames('usa-nav__link', styles.homeNavItem)}
       onClick={onClick}
     >
       <span className={styles.navbarItemText}>Home</span>
     </Link>,
-    <NavigationLink key="two" href={`/`} onClick={onClick}>
+    <NavigationLink href="/" onClick={onClick}>
       Home
     </NavigationLink>,
-    <NavigationLink key="two" href={`/our-products`} onClick={onClick}>
+    <NavigationLink href="/our-products" onClick={onClick}>
       Our products
     </NavigationLink>,
-    <NavigationLink key="two" href={`/our-products`} onClick={onClick}>
+    <NavigationLink href="/case-studies" onClick={onClick}>
       Case studies
     </NavigationLink>,
-    <NavigationLink key="three" href={`/engage-with-us`} onClick={onClick}>
+    <NavigationLink href="/engage-with-us" onClick={onClick}>
       Engage with us
     </NavigationLink>,
   ];
@@ -45,14 +44,16 @@ export default function Footer() {
             <div className="usa-logo">
               <em className="usa-logo__text">
                 <a href="http://cdc.gov" title="<Project title>">
-                  <span className={`${styles.navbarLogoText} sr-only`}>
+                  <span
+                    className={classNames('sr-only', styles.navbarLogoText)}
+                  >
                     CDC US center for disease control and prevention
                   </span>
                   <Image
                     width={200}
                     height={40}
                     alt=""
-                    className={'margin-x-0'}
+                    className="margin-x-0"
                     src={`${basePath}/images/CDC.svg`}
                   />
                 </a>

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -1,32 +1,26 @@
 'use client';
-import { Header, PrimaryNav } from '@trussworks/react-uswds';
-import Link from 'next/link';
+import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds';
 import Image from 'next/image';
-import { usePathname } from 'next/navigation';
 import React from 'react';
 import styles from '../styles/Home.module.scss';
-import { LinkProps } from 'next/link';
-
-interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
-  children: React.ReactNode;
-}
-
-export default function Navbar() {
-  const basePath = '/dibbs-site';
+import classNames from 'classnames';
+import { basePath } from '../utils/constants';
+import { NavigationLink } from './NavigationLink';
 
+export default function Header() {
   const [expanded, setExpanded] = React.useState(false);
   const onClick = () => {
     if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded);
   };
 
   const testItemsMenu = [
-    <NavigationLink key="two" href="/our-products" onClick={onClick}>
+    <NavigationLink href="/our-products" onClick={onClick}>
       Our products
     </NavigationLink>,
-    <NavigationLink key="two" href="/case-studies" onClick={onClick}>
+    <NavigationLink href="/case-studies" onClick={onClick}>
       Case studies
     </NavigationLink>,
-    <NavigationLink key="three" href="/engage-with-us" onClick={onClick}>
+    <NavigationLink href="/engage-with-us" onClick={onClick}>
       Engage with us
     </NavigationLink>,
   ];
@@ -37,20 +31,22 @@ export default function Navbar() {
         Skip to main content
       </a>
 
-      <Header basic={true} className="bg-background-teal">
+      <USWDSHeader basic={true} className="bg-background-teal">
         <div className="usa-nav-container flex-vertical-center">
           <div className="usa-navbar">
             <div className="usa-logo">
               <em className="usa-logo__text">
                 <a href={`${basePath}/`} title="<Project title>">
-                  <span className={`${styles.navbarLogoText} sr-only`}>
+                  <span
+                    className={classNames('sr-only', styles.navbarLogoText)}
+                  >
                     Data Integration Building Blocks
                   </span>
                   <Image
                     width={200}
                     height={40}
                     alt=""
-                    className={'margin-x-0'}
+                    className="margin-x-0"
                     src={`${basePath}/images/dibbs-logo.svg`}
                   />
                 </a>
@@ -66,27 +62,7 @@ export default function Navbar() {
             onToggleMobileNav={onClick}
           />
         </div>
-      </Header>
+      </USWDSHeader>
     </>
   );
 }
-
-export function NavigationLink({
-  href,
-  children,
-  onClick,
-}: NavigationLinkProps) {
-  const pathname = usePathname(); // Use usePathname hook to get the current path
-  const isActive = pathname === href;
-  return (
-    <Link href={href} passHref className={`usa-nav__link`} onClick={onClick}>
-      <span
-        className={
-          (isActive && 'navbar-item-active') + ' ' + styles.navbarItemText
-        }
-      >
-        {children}
-      </span>
-    </Link>
-  );
-}
diff --git a/src/app/components/NavigationLink.tsx b/src/app/components/NavigationLink.tsx
@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import Link, { LinkProps } from 'next/link';
+import { usePathname } from 'next/navigation';
+import styles from '../styles/Home.module.scss';
+
+interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
+  children: React.ReactNode;
+}
+
+export function NavigationLink({
+  href,
+  children,
+  onClick,
+}: NavigationLinkProps) {
+  const pathname = usePathname(); // Use usePathname hook to get the current path
+  const isActive = pathname === href;
+  return (
+    <Link href={href} passHref className="usa-nav__link" onClick={onClick}>
+      <span
+        className={classNames(styles.navbarItemText, {
+          'navbar-item-active': isActive,
+        })}
+      >
+        {children}
+      </span>
+    </Link>
+  );
+}
diff --git a/src/app/components/UsaBanner.tsx b/src/app/components/UsaBanner.tsx
@@ -11,13 +11,10 @@ import {
   MediaBlockBody,
   Icon,
 } from '@trussworks/react-uswds';
+import { dotGovIcon, flagImg, httpsIcon } from '../utils/constants';
 
 export default function USABanner() {
-  const basePath: string = '/dibbs-site';
   const [isOpen, setIsOpen] = useState(false);
-  const flagImg: string = `${basePath}/images/us-flag.png`;
-  const dotGovIcon: string = `${basePath}/images/us-gov-icon.svg`;
-  const httpsIcon: string = `${basePath}/images/https-icon.svg`;
   return (
     <Banner aria-label="Official website of the state department of something specific">
       <BannerHeader

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,16 @@
 import type { Metadata } from 'next';
 import './globals.css';
 import Script from 'next/script';
-import Navbar from './components/Header';
+import Header from './components/Header';
 import Footer from './components/Footer';
 import USABanner from './components/UsaBanner';
+import { basePath } from './utils/constants';
 
 export const metadata: Metadata = {
   title: 'DIBBS Site',
+  icons: {
+    icon: `${basePath}/app/favicon.ico`,
+  },
 };
 
 export default function RootLayout({
@@ -16,11 +20,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <head></head>
       <body>
         <USABanner />
         <div>
-          <Navbar />
+          <Header />
           <main id="main-content">{children}</main>
           <Footer />
         </div>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,9 @@
 import MarkdownContent from './components/MarkdownComponent';
 import { Grid } from '@trussworks/react-uswds';
 import Image from 'next/image';
+import { basePath } from './utils/constants';
 
 export default async function Home() {
-  const basePath = '/dibbs-site';
-
   return (
     <>
       <section className="usa-graphic-list usa-section usa-section--light-blue">

diff --git a/src/app/utils/constants.ts b/src/app/utils/constants.ts
@@ -0,0 +1,6 @@
+const basePath = '/dibbs-site';
+const flagImg = `${basePath}/images/us-flag.png`;
+const dotGovIcon = `${basePath}/images/us-gov-icon.svg`;
+const httpsIcon = `${basePath}/images/https-icon.svg`;
+
+export { basePath, flagImg, dotGovIcon, httpsIcon };