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

	const links = [
		{ href: '/', label: 'Blog' },
		{ href: '/about', label: 'About' },
		{ href: '/music', label: 'Music' }
	];
</script>

<nav class="border-b border-electric-violet-800 bg-white">
	<div class="mx-auto max-w-4xl px-4">
		<div class="flex gap-8 py-4">
			{#each links as link}
				<a
					href={link.href}
					class=" text-gray-700 transition hover:text-electric-violet-800"
					class:font-semibold={page.url.pathname === link.href}
					class:text-electric-violet-800={page.url.pathname === link.href}
				>
					{link.label}
				</a>
			{/each}
		</div>
	</div>
</nav>
