File size: 1,155 Bytes
a8898de | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <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}
|