<script lang="ts">
	import { page } from '$app/stores';

	interface Props {
		label: string;
		href: string;
	}

	let { label, href }: Props = $props();

	const isActive = $derived($page.url.pathname === href || $page.url.pathname.startsWith(href + '/'));
</script>

<a
	{href}
	class="block rounded-lg py-1.5 pr-2 pl-3 font-sans text-sm font-semibold text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100 {isActive
		? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
		: ''}"
>
	{label}
</a>
