From 00493a7dfbc9c25e3fb38e17b6650c5e1bc2a26c Mon Sep 17 00:00:00 2001
From: nickbristow <richard.nick.bristow@gmail.com>
Date: Wed, 23 Oct 2024 14:43:01 -0400
Subject: [PATCH] updates based on comments

---
 src/app/components/Footer.tsx                 | 41 ++++++++++---------
 .../{NavbarUSWDS.tsx => Header.tsx}           | 30 ++++++++++----
 .../{USAWebsite.tsx => UsaBanner.tsx}         |  0
 src/app/layout.tsx                            |  4 +-
 4 files changed, 45 insertions(+), 30 deletions(-)
 rename src/app/components/{NavbarUSWDS.tsx => Header.tsx} (75%)
 rename src/app/components/{USAWebsite.tsx => UsaBanner.tsx} (100%)

diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
index 82bf6f2..0f83bd7 100644
--- 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>)
-    );
 }
\ No newline at end of file
diff --git a/src/app/components/NavbarUSWDS.tsx b/src/app/components/Header.tsx
similarity index 75%
rename from src/app/components/NavbarUSWDS.tsx
rename to src/app/components/Header.tsx
index e6cd045..f8b1096 100644
--- a/src/app/components/NavbarUSWDS.tsx
+++ b/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>)
     );
 }
\ No newline at end of file
diff --git a/src/app/components/USAWebsite.tsx b/src/app/components/UsaBanner.tsx
similarity index 100%
rename from src/app/components/USAWebsite.tsx
rename to src/app/components/UsaBanner.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index af656e3..f6826ca 100644
--- 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",