noway.moe/src/components/HeaderLink.astro
2023-12-26 21:07:41 -07:00

38 lines
831 B
Plaintext

---
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>