noway.moe/src/components/HeaderLink.astro

---
import type { HTMLAttributes } from 'astro/types';

type Props = HTMLAttributes<'a'>;

const { href, ...props } = Astro.props;

const { pathname } = Astro.url;
const isActive = href === pathname || href === pathname.replace(/\/$/, '');
---

<a href={href} {...props}>
    <slot />
</a>

<style is:inline>
    a {
        display: inline-block;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
        text-decoration-color: var(--accent-color);
    }
    a.inverted-button {
        color: white;
        background-color: black;
        border-radius: 8px;
        border: 2px solid black;
        padding: 2px 8px;
        text-decoration: none;
    }
    a.inverted-button:hover {
        background-color: var(--accent-color);
        border-color: var(--accent-color);
    }
</style>