highlight the current page on the navbar

src/components/Navbar.tsx

@@ -1,22 +1,46 @@
 import { cn } from "@/lib/utils";
 
-export default function Navbar() {
+interface NavbarProps {
+  activePage?: string;
+}
+
+export default function Navbar({ activePage = "" }: NavbarProps) {
   return (
     <>
       <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
         <div>
           <strong className={cn("sm:text-2xl md:text-4xl")}>
-            <a href="/">Resist Tech Monopolies</a>
+            <a href="/">
+            Resist Tech Monopolies
+            </a>
           </strong>
         </div>
         <strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}>
-          <a href="/GetInvolved/" className={cn("text-blue-500")}>
+          <a
+            href="/GetInvolved/"
+            className={cn(
+              "text-blue-500",
+              activePage === "GetInvolved" && "border-b-2 border-blue-500"
+            )}
+          >
             Get Involved
           </a>
-          <a href="/PointsOfUnity/" className={cn("text-green-500")}>
+          <a
+            href="/PointsOfUnity/"
+            className={cn(
+              "text-green-500",
+              activePage === "PointsOfUnity" && "border-b-2 border-green-500"
+            )}
+          >
             Points of Unity
           </a>
-          <a href="/WhatWereWorkingOn/" className={cn("text-red-500")}>
+          <a
+            href="/WhatWereWorkingOn/"
+            className={cn(
+              "text-red-500",
+              activePage === "WhatWereWorkingOn" && "border-b-2 border-red-500"
+            )}
+          >
             What We're Working On
           </a>
         </strong>
@@ -25,8 +49,8 @@ export default function Navbar() {
       <div className={cn("flex flex-row justify-between pb-8")}>
         {[
           1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-        ].map(() => (
-          <>
+        ].map((key) => (
+          <div key={key}>
             <a
               href="https://www.flaticon.com/free-icons/computer"
               title="computer icons"
@@ -40,12 +64,12 @@ export default function Navbar() {
             </a>
 
             <a
-              href="https://www.flaticon.com/free-icons/people"
+              href="https://www.flaticon.com/free-icons/peopler"
               title="people icons"
             >
               <img src="/people.png" alt="people icon" width="30" height="30" />
             </a>
-          </>
+          </div>
         ))}
       </div>
     </>

src/pages/GetInvolved.astro

@@ -8,7 +8,7 @@ import "../styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="GetInvolved" />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Get Involved</h1>
         

src/pages/PointsOfUnity.astro

@@ -8,7 +8,7 @@ import "../styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="PointsOfUnity" />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Points of Unity</h1>
         <p>

src/pages/WhatWereWorkingOn.astro

@@ -8,7 +8,7 @@ import "../styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="WhatWereWorkingOn" />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">What We're Working On</h1>
         <p>Pihole Workshop</p>

src/pages/index.astro

@@ -8,7 +8,7 @@ import "@/styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="home" />
 
       <div class="pl-4 pr-4">
         <p>