Update style to display active nav link

src/components/Header.astro

@@ -1,3 +1,11 @@
+---
+export interface Props {
+  activeNav?: "posts" | "tags" | "about";
+}
+
+const { activeNav } = Astro.props;
+---
+
 <header>
   <div class="nav-container">
     <div class="top-nav-wrap">
@@ -10,9 +18,19 @@
     </div>
     <nav class="display-none sm:flex">
       <ul>
-        <li><a href="/posts">Posts</a></li>
+        <li>
-        <li><a href="/tags">Tags</a></li>
+          <a href="/posts" class={activeNav === "posts" ? "active" : ""}
-        <li><a href="/about">About</a></li>
+            >Posts</a
+          >
+        </li>
+        <li>
+          <a href="/tags" class={activeNav === "tags" ? "active" : ""}>Tags</a>
+        </li>
+        <li>
+          <a href="/about" class={activeNav === "about" ? "active" : ""}
+            >About</a
+          >
+        </li>
       </ul>
       <div class="button-wrapper">
         <button>
@@ -72,6 +90,9 @@
   nav a {
     @apply py-2 px-3 font-medium hover:text-skin-accent;
   }
+  nav a.active {
+    @apply underline underline-offset-4 decoration-wavy decoration-2;
+  }
   .button-wrapper {
     @apply flex my-2 space-x-4 sm:space-x-2;
   }