updates based on comments

CDCgov · Oct 23, 2024 · 00493a7 · 00493a7
1 parent 70f6cce
commit 00493a7
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 30 deletions.
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -2,13 +2,9 @@
 import { Header, PrimaryNav } from "@trussworks/react-uswds";
 import Link from "next/link";
 import Image from "next/image";
-import { usePathname } from "next/navigation";
 import React from "react";
 import styles from "../styles/Home.module.scss"
-
-interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
-  children: React.ReactNode;
-}
+import { NavigationLink} from "./Header"
 
 export default function Footer() {
     const basePath = "/dibbs-site";
@@ -26,10 +22,27 @@ export default function Footer() {
             <span className={styles.navbarItemText}>Home</span>
 
         </Link>,
-        <NavigationLink key="two" href={`${basePath}/`} text='Home' onClick={onClick} />,
-        <NavigationLink key="two" href='/our-products' text='Our products' onClick={onClick} />,
-        <NavigationLink key="two" href='/our-products' text='Case studies' onClick={onClick} />,
-        <NavigationLink key="three" href='/engage-with-us' text='Engage with us' onClick={onClick} />
+        (
+          <NavigationLink key="two" href={`${basePath}/`} onClick={onClick}>
+            Home
+          </NavigationLink>
+        ),
+        (
+          <NavigationLink key="two" href={`${basePath}/our-products`} onClick={onClick}>
+            Our products
+          </NavigationLink>
+        ),
+        (
+          <NavigationLink key="two" href={`${basePath}/our-products`} onClick={onClick}>
+            Case studies
+          </NavigationLink>
+        ),
+        (
+          <NavigationLink key="three" href={`${basePath}/engage-with-us`} onClick={onClick}>
+            Engage with us
+          </NavigationLink>
+        )
+
     ]
 
     return <>
@@ -56,14 +69,4 @@ export default function Footer() {
           </div>
         </Header>
     </>;
-}
-
-function NavigationLink({ href, text, 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}>{text}</span>
-        </Link>)
-    );
 }
diff --git a/src/app/components/NavbarUSWDS.tsx → src/app/components/Header.tsx b/src/app/components/NavbarUSWDS.tsx → src/app/components/Header.tsx
@@ -5,11 +5,10 @@ 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 {
-  href: string;
-  text: string;
-  onClick?: () => void;
+interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
+  children: React.ReactNode;
 }
 
 export default function Navbar() {
@@ -28,9 +27,22 @@ export default function Navbar() {
             <span className={styles.navbarItemText}>Home</span>
 
         </Link>,
-        <NavigationLink key="two" href='/our-products' text='Our products' onClick={onClick} />,
-        <NavigationLink key="two" href='/our-products' text='Case studies' onClick={onClick} />,
-        <NavigationLink key="three" href='/engage-with-us' text='Engage with us' onClick={onClick} />
+        (
+          <NavigationLink key="two" href='/our-products' onClick={onClick}>
+            Our products
+          </NavigationLink>
+        ),
+        (
+          <NavigationLink key="two" href='/our-products' onClick={onClick}>
+            Case studies
+          </NavigationLink>
+        ),
+        (
+          <NavigationLink key="three" href='/engage-with-us' onClick={onClick}>
+            Engage with us
+          </NavigationLink>
+        )
+
     ]
 
     return <>
@@ -61,12 +73,12 @@ export default function Navbar() {
     </>;
 }
 
-function NavigationLink({ href, text, onClick }: NavigationLinkProps) {
+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}>{text}</span>
+            <span className={(isActive && "navbar-item-active") + ' ' + styles.navbarItemText}>{children}</span>
         </Link>)
     );
 }
diff --git a/src/app/components/USAWebsite.tsx → src/app/components/UsaBanner.tsx b/src/app/components/USAWebsite.tsx → src/app/components/UsaBanner.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Script from "next/script";
-import Navbar from "./components/NavbarUSWDS";
+import Navbar from "./components/Header";
 import Footer from "./components/Footer";
-import USABanner from "./components/USAWebsite";
+import USABanner from "./components/UsaBanner";
 
 export const metadata: Metadata = {
   title: "DIBBS Site",