diff options
Diffstat (limited to 'examples/blog/src/components/HeaderLink.astro')
-rw-r--r-- | examples/blog/src/components/HeaderLink.astro | 20 |
1 files changed, 20 insertions, 0 deletions
diff --git a/examples/blog/src/components/HeaderLink.astro b/examples/blog/src/components/HeaderLink.astro new file mode 100644 index 000000000..41e19de84 --- /dev/null +++ b/examples/blog/src/components/HeaderLink.astro @@ -0,0 +1,20 @@ +--- +export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {} + +const { href, class: className, ...props } = Astro.props as Props; +const isActive = href === Astro.url.pathname; +--- + +<a href={href} class:list={[className, { active: isActive }]} {...props}> + <slot /> +</a> +<style> + a { + display: inline-block; + text-decoration: none; + } + a.active { + font-weight: bolder; + text-decoration: underline; + } +</style> |