init

lib/components/bio/profile/Badge.svelte

@@ -0,0 +1,25 @@
+<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>