Add new search link in header

src/components/Header.astro

@@ -1,8 +1,9 @@
 ---
 import Hr from "./Hr.astro";
+import LinkButton from "./LinkButton.astro";
 
 export interface Props {
-  activeNav?: "posts" | "tags" | "about";
+  activeNav?: "posts" | "tags" | "about" | "search";
 }
 
 const { activeNav } = Astro.props;
@@ -38,13 +39,19 @@ const { activeNav } = Astro.props;
         </li>
       </ul>
       <div class="button-wrapper">
-        <button class="focus-outline">
+        <LinkButton
+          href="/search"
+          className={`focus-outline p-1 ${
+            activeNav === "search" ? "active" : ""
+          }`}
+        >
           <svg xmlns="http://www.w3.org/2000/svg"
             ><path
               d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
             ></path>
           </svg>
-        </button>
+        </LinkButton>
+
         <button id="theme-btn" class="focus-outline">
           <svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"
             ><path
@@ -104,6 +111,9 @@ const { activeNav } = Astro.props;
   .button-wrapper {
     @apply flex my-2 sm:my-0 space-x-4;
   }
+  .button-wrapper a.active svg {
+    @apply fill-skin-accent;
+  }
   nav button {
     @apply p-1;
   }