migrate to astro

src/components/HeaderLink.astro

@@ -0,0 +1,56 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"a">;
+
+const { href, class: className, ...props } = Astro.props;
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
+const subpath = pathname.match(/[^\/]+/g);
+const isActive = href === pathname || href === "/" + (subpath?.[0] || "");
+---
+
+<a
+    href={href}
+    class:list={[
+        className,
+        isActive ? "active" : "",
+        "p-2 hover:text-mytheme-800 hover:dark:text-mytheme-100 inline-block no-underline relative",
+    ]}
+    {...props}
+>
+    <slot />
+</a>
+
+<style>
+    /* Hover animation for non-active links */
+    a:not(.active)::after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 4px;
+        bottom: 0;
+        left: 50%;
+        background-color: var(--tw-mytheme-400);
+        transition: all 0.3s ease-in-out;
+        transform: translateX(-50%);
+    }
+
+    a:not(.active):hover::after {
+        width: 100%;
+    }
+
+    /* Solid underline for active links */
+    a.active::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 4px;
+        bottom: 0;
+        left: 0;
+        background-color: var(--tw-mytheme-400);
+    }
+
+    a.active {
+        font-weight: bold;
+    }
+</style>