25 lines
818 B
Svelte
25 lines
818 B
Svelte
<script lang="ts">
|
|
import { MediaQuery } from 'svelte/reactivity';
|
|
import HoverIcon from './HoverIcon.svelte';
|
|
import { isLinkLocal, tryGetIcon } from '$lib/util/LinkResolver';
|
|
|
|
export let href: string;
|
|
let className: string = '';
|
|
export { className as class };
|
|
export let customIcon: string | null = null;
|
|
|
|
const sm = new MediaQuery('width >= 40rem', false);
|
|
</script>
|
|
|
|
<a {href} class="{className} 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={customIcon ?? tryGetIcon(href)} size={sm.current ? 24 : 20} />
|
|
</span>
|
|
<span class="text-emerald-900 underline">
|
|
<slot />
|
|
</span>
|
|
</a>
|
|
|
|
<style></style>
|