32 lines
921 B
Svelte
32 lines
921 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import { MediaQuery } from 'svelte/reactivity';
|
|
import HoverIcon from './HoverIcon.svelte';
|
|
import { isLinkLocal, tryGetIcon } from '$lib/util/LinkResolver';
|
|
|
|
let {
|
|
href,
|
|
class: klass = '',
|
|
customIcon = null,
|
|
children
|
|
}: { href: string; class?: string; customIcon?: string | null; children: Snippet } = $props();
|
|
|
|
const iconSrc = $derived(customIcon ?? tryGetIcon(href));
|
|
|
|
const sm = new MediaQuery('width >= 40rem', false);
|
|
</script>
|
|
|
|
<a
|
|
{href}
|
|
class="{klass} group inline-block no-underline"
|
|
target={isLinkLocal(href) ? '_self' : '_blank'}
|
|
>
|
|
<span
|
|
class="inline-block size-6 rounded-sm bg-emerald-800 p-0.5 align-bottom transition-all group-hover:scale-110 sm:size-8 sm:rounded-xl sm:p-1"
|
|
>
|
|
<HoverIcon src={iconSrc} size={sm.current ? 24 : 20} />
|
|
</span>
|
|
<span class="text-emerald-900 underline">
|
|
{@render children()}
|
|
</span>
|
|
</a>
|