src/lib/components/header.svelte

<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as Tooltip from '$lib/components/ui/tooltip';
	import SunIcon from 'phosphor-svelte/lib/SunIcon';
	import MoonIcon from 'phosphor-svelte/lib/MoonIcon';
	import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';
	import { mode, toggleMode } from 'mode-watcher';
	import HfLogo from '$lib/components/hf-logo.svelte';
	import { site } from '$lib/site';
</script>

<header class="border-b border-border/60">
	<div class="mx-auto flex h-12 w-full max-w-[1600px] items-center gap-3 px-4">
		<a
			href="/"
			class="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition hover:text-foreground"
			aria-label="Back to dataset home"
		>
			<CaretLeftIcon size={12} weight="bold" />
			<span aria-hidden="true">🎯</span>
			<span>{site.name}</span>
		</a>

		<div class="ml-auto flex items-center gap-1">
			<Tooltip.Root>
				<Tooltip.Trigger>
					{#snippet child({ props })}
						<Button
							{...props}
							href={site.datasetUrl}
							target="_blank"
							rel="noreferrer noopener"
							variant="ghost"
							size="icon-sm"
							aria-label="Dataset on Hugging Face"
						>
							<HfLogo class="size-4" />
						</Button>
					{/snippet}
				</Tooltip.Trigger>
				<Tooltip.Content side="bottom">View on Hugging Face</Tooltip.Content>
			</Tooltip.Root>
			<Button variant="ghost" size="icon-sm" onclick={toggleMode} aria-label="Toggle theme">
				{#if mode.current === 'dark'}
					<SunIcon size={16} weight="duotone" />
				{:else}
					<MoonIcon size={16} weight="duotone" />
				{/if}
			</Button>
		</div>
	</div>
</header>