init

lib/components/bio/profile/SocialLink.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Site } from '$lib/models/socials';
+
+  export let hoverInvert: boolean = false;
+  export let minimal: boolean = false;
+
+  export let site: Site | undefined;
+  export let social: BioSiteSocialLink;
+</script>
+
+{#if site}
+  <a
+    class="flex-grow"
+    style="--color: {site.color}"
+    href={`${site.type == 'EMAIL' ? 'mailto:' : site.baseUrl}${social.value}`}
+    target="_blank"
+    title={site.name}>
+    <div
+      class="w-full min-w-[95px] h-10 hover:opacity-80 transition-opacity rounded-lg flex justify-center items-center">
+      <img class="w-5 h-5" alt="Icon" src={site.icon} />
+    </div>
+  </a>
+{/if}
+
+<!--  -->
+
+<style lang="postcss">
+  div {
+    background: var(--color);
+  }
+</style>