src/lib/components/LinkRow.svelte

<script lang="ts">
	import Icon from './Icon.svelte';

	interface Props {
		links?: Partial<Record<string, string>>;
		accent?: string;
		compact?: boolean;
		style?: string;
	}
	let { links, accent = 'var(--ink)', compact = false, style = '' }: Props = $props();

	const LINK_META: Record<string, { glyph: string; label: string }> = {
		website: { glyph: 'globe', label: 'Website' },
		huggingface: { glyph: 'hug', label: 'Hugging Face' },
		twitter: { glyph: 'xsocial', label: 'X' },
		github: { glyph: 'github', label: 'GitHub' }
	};
	const order = ['website', 'huggingface', 'twitter', 'github'];

	const items = $derived(order.filter((k) => links && links[k]));

	function href(v: string) {
		return v.startsWith('http') ? v : 'https://' + v;
	}
</script>

{#if items.length}
	<div class="linkrow" {style}>
		{#each items as k (k)}
			<a
				class="linkpill"
				href={href(links![k]!)}
				target="_blank"
				rel="noreferrer"
				style="--lp:{accent}"
				title={LINK_META[k].label}
			>
				<Icon name={LINK_META[k].glyph} size={15} stroke="currentColor" />
				{#if !compact}<span>{LINK_META[k].label}</span>{/if}
			</a>
		{/each}
	</div>
{/if}