25 lines
717 B
Svelte
25 lines
717 B
Svelte
<script lang="ts">
|
|
import badges from '$lib/badges';
|
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
|
|
|
export let badge: BioSiteBadge;
|
|
|
|
const badgeObject = badges.find((x) => x.id == badge);
|
|
</script>
|
|
|
|
{#if badgeObject}
|
|
<a class="relative inline-block" href={badgeObject.link} aria-label={badgeObject.name}>
|
|
<div class="w-5 h-5 bg-cover bg-center peer" style="--icon: url({badgeObject.icon})" />
|
|
<div
|
|
class="relative opacity-0 peer-hover:opacity-100 -translate-y-5 peer-hover:-translate-y-8 transition-all"
|
|
aria-hidden="true">
|
|
<Tooltip>{badgeObject.name}</Tooltip>
|
|
</div>
|
|
</a>
|
|
{/if}
|
|
|
|
<style lang="postcss">
|
|
div {
|
|
background-image: var(--icon);
|
|
}
|
|
</style>
|